Safari ≤15.6 中 transform 导致文字锯齿，根源是旧渲染管线将旋转/缩放文字当作低质纹理处理，必须绕开 GPU 合成层或强制像素对齐，不能依赖 will-change 或 -webkit-font-smoothing 单独修复。
直接结论：Safari ≤15.6 中 transform 导致文字锯齿，不是 CSS 写错了，而是旧渲染管线把旋转/缩放后的文字当低质纹理处理——必须绕开 GPU 合成层或强制像素对齐，不能靠 will-change 或 -webkit-font-smoothing 单独硬扛。
为什么 rotate() 在 Safari 里特别糊
旧版 Safari（尤其是 iOS 15 及更早、macOS Safari ≤15.6）对非 90° 倍数的 rotate() 会跳过软件抗锯齿兜底，直接走 GPU 纹理双线性插值。文字边缘被当成位图拉伸，结果就是毛边、发虚、彩色渗色。这不是 bug，是它渲染路径的固有妥协。
-
rotate(15deg)糊，rotate(90deg)通常不糊——因为后者能对齐像素网格 -
transform: rotate(15deg) translateZ(0)比单用rotate()更糊：它强制创建两个合成层，插值误差翻倍 -
will-change: transform静态写死在 CSS 里，只会让问题更稳定地复现，不是修复指令
真正有效的替代方案：避开 rotate() 本身
与其调参数，不如换路径。以下三法在 Safari 14–15.6 实测有效：
- 小角度倾斜改用
skewX()+skewY()，例如transform: skewX(-2deg) skewY(2deg)，文字仍走主渲染层，不触发 GPU 纹理采样 - 纯图标类文字（如按钮里的 “+”、“→”）改用 SVG：
- 必须用旋转时，优先试
rotateZ(15deg)而非rotate(15deg)，Safari 对 Z 轴旋转的合成策略略保守，有时能避开最糙的插值路径
强制像素对齐的 Safari 专用写法
模糊常因 transform-origin 落在非整数坐标上触发（比如容器宽 199px，50% 50% 算出 99.5px）。解决方式非常具体：
- 把
transform-origin: 50% 50%改成transform-origin: 0 0或transform-origin: 100px 100px（确保两个值都是整数px） - 加
backface-visibility: hidden，它在旧 Safari 中能轻微抑制合成层抖动（不是万能，但有时管用） - 删掉所有
will-change: transform和translateZ(0)——它们在这里不是加速器，是糊化放大器
别再依赖 -webkit-font-smoothing 单打独斗
这个属性只在文字未被提升为合成层时才生效。一旦用了 transform、opacity 或 filter，它就彻底失效。DevTools 的 Layers 面板里如果看到文字区域标红（独立 GPU 图层），就说明它已经失去控制权。
- 加了
-webkit-font-smoothing: antialiased后文字变细发灰？那是它在强制灰度抗锯齿，对中文字体反而更不利 - 想让它起效，得先确保文字没进 GPU 层：禁用父级的
backface-visibility: hidden、避免opacity: 0.99这类“伪透明” - 真正该优先检查的是：动画中所有
translateX()/translateY()是否含小数；容器宽高是否为偶数像素；border-radius值是否取整
复杂点在于：Safari 旧版没有统一修复入口，每个模糊场景背后是不同渲染路径的失效。最稳的解法不是“修”，而是“绕”——用 flex 替代 transform 居中，用 SVG 替代 rotate()，用整数 px 值替代百分比或小数角度。这些不是降级，是适配旧管线的必要收敛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
