旧版 webkit 需用 -webkit-transform: translatez(0) 或 translate3d(0, 0, 0) 触发 gpu 合成，必须带前缀且置于无前缀声明之前；禁用 will-change，浮动元素应改用 backface-visibility: hidden 避免抖动。
旧版 WebKit（Safari ≤14、iOS WebView、Chrome ≤25）必须加 -webkit-transform: translateZ(0)
现代浏览器已自动为 transform 和 opacity 动画创建合成层，但旧版 WebKit 不会——它只在检测到明确的 3D 变换时才触发 GPU 合成。静态写 transform: translateZ(0)（无前缀）会被 Safari 6–14、iOS 7–14、Android Browser 等直接忽略。
- 必须使用带前缀的写法：
-webkit-transform: translateZ(0)，且不能省略-webkit- - 不能只写前缀版：需同时保留无前缀版本，否则 Firefox/Edge 会失效；但顺序要对——
-webkit-transform必须在transform之前 - 仅加在「实际执行动画的元素」上，不要污染父容器或未动画元素，否则图层爆炸、内存飙升
- 避免和
float共用：translateZ(0)在 WebKit 下会让浮动元素抖动更严重，见下文
translate3d(0, 0, 0) 比 translateZ(0) 更稳，但体积略大
两者都能触发合成，但 -webkit-transform: translate3d(0, 0, 0) 在 Safari 9–14 和 iOS 9–13 上兼容性更可靠，尤其当元素同时有 transition 或 animation 时。
-
translate3d()是完整 3D 变换函数，WebKit 内核对其识别更坚定，极少被降级为软件渲染 - 注意：不要写成
translate3d(0px, 0px, 0px)—— Safari 12 及更早版本会拒绝解析带单位的z值，必须是纯数字0 - 如果 CSS 文件体积敏感（如嵌入式设备），优先选
translateZ(0)；否则推荐translate3d(0, 0, 0)
浮动元素 + 硬件加速 = 抖动，改用 backface-visibility: hidden
在 Safari 14–17、iOS WebKit 中，给 float: left 元素加 -webkit-transform: translateZ(0) 会导致 subpixel 错位放大，视觉上一卡一跳，不是加速失败，而是触发了错误合成策略。
- 正确解法是换用
-webkit-backface-visibility: hidden（同样需配无前缀版） - 它能触发合成，但不改变定位上下文，不影响
float的布局基准，也不新建 stacking context - 若浮动容器本身需要包裹子项，优先给其父容器设
display: flow-root，而不是在浮动子元素上硬加加速
别碰 will-change，旧 WebKit 对它支持极差
旧版 WebKit（Safari ≤13.1、iOS ≤13.3）对 will-change 的实现是半残废状态：要么完全忽略，要么提前创建图层却不释放，导致滚动掉帧、内存泄漏。
-
will-change: transform在 Safari 12 中可能让动画延迟 1–2 帧才开始 -
will-change: scroll-position在 iOS 12–14 完全无效，且不报错，排查困难 - 旧环境里唯一安全的预告方式，仍是手动加
-webkit-transform: translateZ(0)配合transition声明
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
