确认合成层是否建起需打开Safari开发者工具→Develop→Show Web Inspector→Rendering→勾选Show Compositing Borders，触发动画后目标元素出现橙色边框才表明成功进入GPU合成层；无橙色边框则所有加速手段均无效。
iOS Safari 卡顿不是动画写得不好，而是合成层没真正建起来——不看橙色边框，所有优化都是蒙的。
怎么确认合成层有没有建起来
打开 Safari 开发者工具 → Develop → Show Web Inspector → Rendering → 勾选 Show Compositing Borders。触发动画后，目标元素必须出现橙色边框，才说明进了 GPU 合成层。没有橙色边框，translate3d(0, 0, 0)、backface-visibility: hidden 全部白加。
- 父容器有
overflow: hidden、clip-path或filter: blur()？这些会直接压住子元素，阻止升层 - 动画里混了
left、background-color、width？整条动画立刻退到 CPU 渲染 - 用了 CSS 变量驱动
@keyframes？iOS Safari 15.6 之前版本直接跳过整个动画块
为什么加了 backface-visibility: hidden 还卡
它本身不加速，只是防止背面像素错误绘制的“保险丝”。真正起效的前提是：动画属性必须是 transform 或 opacity，且元素已通过 transform: translate3d(0, 0, 0) 强制升层。
-
backface-visibility: hidden必须写在实际做动画的元素上，不是父容器 - 和
will-change: transform共存可能引发 WebKit 合成策略冲突，尤其滚动场景下优先别用 - 父级有
overflow: hidden时，该属性会被 Safari 忽略，合成层根本升不起来 - 顺序不能错：
transform: translate3d(0, 0, 0)必须在前，backface-visibility: hidden在后
为什么 transform 动画在 iPhone 上不动或闪一下就停
iOS WebKit 对前缀和单位极其敏感，漏一个细节，动画就静默失效。
立即学习“前端免费学习笔记（深入）”；
- 必须双写：
transform: translateX(100px)和-webkit-transform: translateX(100px)；只写标准版或只写前缀版都不可靠 -
@keyframes里数值必须带单位：translateX(0px)不能写成translateX(0) - 动画类添加后立刻执行？Safari 可能还没完成样式计算。加一行
getComputedStyle(el).transform强制重排，再启动动画 - 跑马灯类动画首次不播？检查容器
width是否为 0；WebKit 首次渲染时若宽度不可知，位移计算直接跳过
什么时候该用 will-change，什么时候不该碰
它不是开关，是预告。设早了、设多了、设错了，比不用还慢。
- 只对
touchmove驱动且用transform模拟位移的子元素动态启用，touchstart时加，touchend后 100ms 内移除 - 绝对不要给滚动容器（如
.list-wrapper）加will-change: transform，会触发合成器过载，反而更卡 - 原生滚动 +
-webkit-overflow-scrolling: touch是更轻量、更稳的选择，无需will-change - 动画启动前 1~2 帧设置，结束后立刻清理；残留的
will-change会持续占用 GPU 内存
真机测试比模拟器准得多，iOS 16+ 对 perspective、transform-style 等属性更严格，任何“看起来正常”的写法，都得在 iPhone 上点开 DevTools 看一眼橙色边框才敢上线。
