iOS 12及更早版Safari需同时声明-webkit-transform和transform，仅写标准属性会导致动画失效或布局错乱，Autoprefixer默认不处理此双写逻辑，须手动配置browserslist。
transform 在 iOS Safari 里不生效？检查 -webkit-transform 是否漏了
iOS 12 及更早版本的 Safari（包括微信内置浏览器）对 transform 的解析严重依赖 -webkit-transform。只写标准属性，动画会直接静止或布局错乱。
- 必须同时声明：
-webkit-transform: translateX(10px); transform: translateX(10px); - 不要只靠 Autoprefixer —— 它默认不处理
transform的双写逻辑，得手动配browserslist覆盖iOS - 用
getComputedStyle(el).transform检查时，iOS 可能返回空字符串，不代表没生效，只是取值方式不同
translateZ(0) 硬件加速失效？关键在触发条件和副作用
translateZ(0) 不是万能开关，它只在满足「合成层创建条件」时才真正启用 GPU 加速，否则只是白加一层无用 stacking context。
- 有效触发场景：元素有
position: relative/absolute/fixed+transform+z-index或opacity - 常见无效写法：
div { transform: translateX(10px) translateZ(0); }单独存在，无其他层叠上下文，iOS 下仍走 CPU 渲染 - 副作用明显：强制开启合成层会增加内存占用，页面滚动卡顿时反而要删掉
translateZ(0)，改用will-change: transform按需提示
scale 导致文字模糊？不是缩放问题，是像素对齐没对上
移动端高 DPI 屏幕下，transform: scale(0.5) 类操作会让字体渲染落在亚像素位置，文字发虚。这不是抗锯齿开关能解决的。
- 优先用 rem/vw 替代
scale做响应式缩放，避免非整数变换矩阵 - 若必须用
scale，配合transform-origin: 0 0和backface-visibility: hidden减少重绘抖动 - 调试技巧：在 Safari 开发者工具中勾选 “Show Paint Rects”，看模糊区域是否频繁重绘
transition + transform 卡顿？检查是否被 layout 触发打断
哪怕只改 transform，如果父容器有 width: fit-content 或子元素含 white-space: nowrap，浏览器仍可能在每一帧触发 layout，硬件加速就白搭。
立即学习“前端免费学习笔记（深入）”；
- 确保动画元素的祖先链上没有
display: table、flex嵌套过深、或font-size动态变化 - 用
transform: translate3d(0, 0, 0)替代translateX/Y，强制创建独立合成层，隔离 layout 影响 - 真机测试比模拟器可靠得多 —— iOS 15.4 之后部分
will-change行为有变更，模拟器无法复现
最常被忽略的是：iOS 上 transform 的 matrix 计算精度比桌面端低，小数点后三位以上的变化可能被截断。别依赖 transform: rotate(0.001deg) 做微调，它在 iPhone SE 第二代上大概率等于没转。
