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));
  }
}
相关推荐
风骏时光牛马22 分钟前
数据可视化管理平台
前端
仿生狮子5 小时前
OpenAI 攻下千禧年难题之后,开发者似乎无动于衷
前端·数学·vibecoding
Lvan的前端笔记8 小时前
docker:每个前端项目一个 Nginx 容器还是只有一个Nginx容器
前端·nginx·docker
三天不学习9 小时前
Egg.js 4 突然爆火,原因是否归结于AI 原生落地需求爆发?
前端·javascript·全栈·egg.js
xcs1940510 小时前
前端 vue 的前端页面debugger 进不去
前端·javascript·vue.js
明月_清风11 小时前
Deno 终局来了:从挑战 Node 到被 Cloudflare 收编
前端·后端·node.js
Csvn12 小时前
框架性能优化
前端
回眸&啤酒鸭13 小时前
【回眸】OpenSwarm 多智能体协作系统实战指南
大数据·前端·人工智能
用户693717500138413 小时前
2026,程序员的时代拐点到了
android·前端·后端
大龄秃头程序员13 小时前
一次 iBeacon + BLE 无感解锁方案的实现记录
前端