IOS CSS3 right transformX 动画卡顿 回弹
卡片从右往左滑动,在同时变换 width height right transformX的时候 在某些IPhone机型上 会有卡顿,在Chrome和Android等很多机型都是OK的,包括我的iphone 14 pro max. IOS 18.2 也是好的。但是,新的iPhone16 也会卡,会回弹一下。
感觉像是计算的不够好,在变大和向左同时向右移动的时候,不能完美的计算出来合适的速度以及变换。
解决办法是,宽高变化替换成scale right不变,保持只改变transformX和scale 动画。虽然没有原来很好的位置和大小了。但是至少动画不是卡顿的。
@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));}
}