IOS CSS3 right transformX 动画卡顿 回弹

卡片从右往左滑动,在同时变换 width height right transformX的时候 在某些IPhone机型上 会有卡顿,在Chrome和Android等很多机型都是OK的,包括我的iphone 14 pro max. IOS 18.2 也是好的。但是,新的iPhone16 也会卡,会回弹一下。

感觉像是计算的不够好,在变大和向左同时向右移动的时候,不能完美的计算出来合适的速度以及变换。

解决办法是,宽高变化替换成scale right不变,保持只改变transformX和scale 动画。虽然没有原来很好的位置和大小了。但是至少动画不是卡顿的。

css 复制代码
@keyframes slideLastRightToActive {
  0% {
    width: 275px;
    height: 320px;
    scale: 1;
    right: 50%;
    transform: translateX(calc(50% + 40px));
  }
  100% {
    width: 275px;
    height: 320px;
    scale: 1.2;
    right: 50%;
    transform: translateX(calc(50% / 1.2));
  }
}
相关推荐
hiahiahia1232 小时前
Streaming Model Output
开发语言·前端
paopaokaka_luck2 小时前
基于springboot+vue的益暖微光公益服务平台(DeepSeek公益助手、善款信息追溯、志愿服务积分闭环、ECharts运营分析、活动状态自动流转)
java·前端·javascript·spring boot·mysql·架构·echarts
栀椩2 小时前
Electron 内嵌页面跨域问题(CORS/PNA)解决全记录
前端·javascript·electron
asaotomo2 小时前
截图识题、AI 讲解、笔记沉淀:Chrome 扩展体验
前端·chrome·笔记
前端架构师-老李2 小时前
HTML与CSS基础第五课—HTML的空格、换行、横线相关知识
前端·css·html
SEO_juper2 小时前
Chrome 扩展一键查看当前页面 SEO 信息:不用切页面,点一下全出来
前端·javascript·chrome
Nymph_Zhu2 小时前
vue3+element-plus 文件上传
前端·typescript·vue3·element-plus
echome8882 小时前
CSS 布局:Flex 和 Grid 怎么选,附常见坑
前端·css·html
计算机魔术师3 小时前
科技巨头砸7400亿押注AI,为什么苹果成了唯一赢家?
前端
QianhangQianping3 小时前
撤销重做不是「存快照」:一个可视化编辑器的Operation 设计
java·前端·数据库·typescript·编辑器·前端架构·撤销重做