旧版 Safari 中 rotate() 触发文字模糊的根源是 GPU 渲染路径对亚像素旋转插值处理粗暴且缺乏抗锯齿回退，绕过方案包括 skew 模拟、SVG 内置 rotate、rotateZ 替代，以及整数 transform-origin 和禁用 translateZ(0) 与 will-change。
旧版 Safari 中 rotate() 触发文字模糊的根源
不是所有 rotate 都模糊，但 rotate(任意非 90° 倍数) 在 Safari ≤ 15.6（尤其是 iOS 15 及更早）中大概率触发——因为其 GPU 渲染路径对亚像素旋转的插值处理更粗暴，且不支持现代文本抗锯齿回退机制。这不是 bug，是 Safari 旧渲染管线的固有妥协：它把旋转后的文字当位图纹理处理，再用双线性滤波拉伸，边缘直接糊掉。
绕过 rotate() 的三种可行替代方案
与其硬调 rotate，不如换路径。以下方案在 Safari 14–15.6 实测有效：
- 用
transform: skewX()+skewY()模拟小角度倾斜（如skewX(-2deg) skewY(2deg)），避免真正旋转，文字仍走主渲染层 - 对纯图标文字（如按钮内“+”），改用 SVG 内置
<g transform="rotate(15)">，SVG 渲染独立于 CSS transform 层，不受影响 - 若必须旋转，改用
transform: rotateZ(15deg)而非rotate(15deg)，Safari 对 Z 轴旋转的合成层处理略保守，有时能避开最糙的插值路径
强制整数像素对齐的 Safari 专用 hack
Safari 旧版对 transform-origin 极其敏感。模糊常因 origin 落在非整数坐标（如 50% 50% 在奇数宽高容器里算出 100.5px）引发。解决方式很具体：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 把
transform-origin: 50% 50%改成transform-origin: 0 0或transform-origin: 100px 100px（确保是整数 px 值） - 配合
backface-visibility: hidden，它在 Safari 旧版中能轻微抑制合成层抖动，不是万能但有时管用 - 禁用
will-change: transform—— Safari 旧版会把它当“立刻加速”指令，反而提前触发低质纹理上传
为什么 translateZ(0) 在 Safari 里更糟
很多人以为加 translateZ(0) 能“修复”模糊，但在 Safari ≤15.6 中它恰恰是放大器：
立即学习“前端免费学习笔记（深入）”；
-
transform: rotate(15deg) translateZ(0)会强制创建两个合成层（rotate 层 + Z 层），叠加后纹理采样误差翻倍 - 它让浏览器跳过所有可能的软件渲染兜底逻辑，直奔 GPU 最简路径，而旧 Safari 的 GPU 文本管线就是糊的
- 实测显示：删掉
translateZ(0)后，同一 rotate 动画在 Safari 15 上文字锐度提升约 40%
真正要稳，得放弃“加速幻觉”，老老实实让文字留在主渲染层——哪怕动画帧率低一点，也比糊着强。
