为什么CSStransform导致Safari文字模糊-css教程-PHP中文网

safari旧版对transform敏感是因其≤15.6版本采用激进gpu渲染路径，文字被当位图纹理处理且无抗锯齿兜底；模糊主因是亚像素坐标（如transform-origin非整数），而非角度本身；translatez(0)和will-change反而加剧模糊，而整数transform-origin、math.round()角度、避免混用变换才是有效控制点。

为什么csstransform导致safari文字模糊

为什么 Safari 旧版对 `transform` 特别敏感

不是 Safari “故意搞事”，而是它在 ≤15.6（尤其 iOS 15 及更早）中用了一套更激进的 GPU 渲染路径：一旦触发合成层，文字就被当位图纹理处理，插值全靠双线性滤波——没有抗锯齿兜底，亚像素坐标直接糊。Chrome 也会糊，但 Safari 的降级更彻底、更不可逆。

`rotate()` 模糊的真正触发条件

模糊不取决于角度大小，而取决于是否落在非整数物理像素上：

rotate(15deg) 在奇数宽高的容器里 + transform-origin: 50% 50% → 实际旋转中心可能是 100.5px 200.5px → 必糊
rotate(90deg) 或 rotate(180deg) 因为轴对称+整数映射，常侥幸清晰，但这不是“安全角度”，只是巧合
rotateZ(15deg) 有时比 rotate(15deg) 稍好，因为 Safari 对 Z 轴旋转的图层合成策略略保守，未必强制走最糙路径

哪些“修复技巧”反而让问题更糟

网上流传的“加个 translateZ(0) 就清晰了”是典型幸存者偏差。实测中它多数时候起反作用：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

transform: rotate(15deg) translateZ(0) 会创建两个合成层，纹理叠加采样误差翻倍
will-change: transform 在 Safari 旧版里等于“立刻上传低质纹理”，不是预告，是命令
filter: blur(0) 或 backface-visibility: hidden 单独用基本无效；后者只在和 transform-style: preserve-3d 错误连用时才可能加重模糊

真正能落地的控制点

模糊不报错，所以必须从源头卡死渲染坐标：

把 transform-origin 改成整数像素值，比如 transform-origin: 100px 100px，而不是 50% 50%
JS 控制动画时，务必四舍五入： el.style.transform = `rotate(${Math.round(angle)}deg)`
缩放优先改 font-size，非要用 scale() 就配整数比：原 16px → scale(1.25) 得 20px，避开 scale(1.23)
居中不用 translate(-50%, -50%)，改用 position: absolute; top: 50%; left: 50%; margin-top: -Apx; margin-left: -Bpx（A/B 是整数）