will-change: transform 仅提示升层，不解决模糊；模糊主因是亚像素渲染，需整数transform值、避免小数角度/位移，并配合translateZ(0)和backface-visibility: hidden。
为什么加了 will-change: transform 还是糊
它只是个提示，不是修复指令。浏览器看到这行，只做一件事：提前把元素升到独立合成层。但升层后如果旋转中心没对齐像素、角度带小数（比如 rotate(45.2deg)），或者文字仍走亚像素渲染路径，模糊照旧。实测中，will-change: transform + rotate(37.812deg) 比不用还糊；而删掉它、只留 transform: translateZ(0) 反而更稳。
常见错误现象包括：
- 元素边缘发虚、文字毛边，尤其在 Safari 和部分安卓 WebView 中明显
- 动画中途突然清晰一帧，结束后又变糊——说明图层没清或坐标没对齐
- 列表滚动变卡、内存占用升高——
will-change被静态写死在 CSS 里，长期占着图层
真正起效的硬件加速写法
触发 GPU 合成层要满足两个条件：属性可被硬件加速 + 渲染路径可控。单独写 transform: translateZ(0) 或 translate3d(0, 0, 0) 是最稳妥的起点，它不依赖 JS 控制时机，也不需要手动清理。
但注意：
立即学习“前端免费学习笔记（深入）”；
-
translateZ(0)必须和will-change: transform写在同一个选择器里，缺一不可（尤其 H5 移动端 WebKit 内核） - 避免对文字直接加
transform或opacity，优先把动画写在父容器上，让文字与背景共图层 - 若必须缩放文字，改用
font-size过渡，而不是scale()
旋转/缩放时角度与尺寸必须取整
锯齿本质是亚像素采样失真。只要 transform 值含小数，就大概率糊。比如容器宽 199px，translateX(50%) 算出来是 99.5px；border-radius: 14.7px 或 rotate(1.3deg) 都会放大渲染误差。
实操建议：
- 角度来自 JS 计算时，务必先
Math.round(angle)再拼进transform - 避免用百分比做位移基准，改用
calc(50% - 0.5px)或固定整数偏移 -
border宽度统一设为偶数整数（如2px、4px），禁用1.5px或3px -
border-radius用整数（12px、16px），不用百分比或小数
Firefox 和 Safari 的特殊处理
Firefox 下 rotateY 边缘锯齿明显，加 outline: 1px solid transparent 可显著缓解；Safari（尤其 iOS WebView）对 backface-visibility: hidden 敏感，未加该声明时图层不稳定，滚动中锯齿会突然加剧。
别碰这些“伪解法”：
-
-webkit-font-smoothing：仅在未升层的 macOS Safari 旧版 Chrome 中微调亚像素，一旦触发transform就失效 -
background-clip: padding-box：解决覆盖关系，不解决抗锯齿 - 静态声明
will-change: transform在:hover选择器里：无明确结束时机，图层长期驻留
最常被忽略的一点：锯齿问题在滚动或 hover 动画中突然加剧，往往是因为漏了 backface-visibility: hidden，图层未稳定分组，合成抖动放大了原本轻微的渲染误差。
