Safari旧版（≤15.6）因激进GPU渲染路径导致transform模糊：亚像素坐标触发双线性滤波无抗锯齿，translateZ(0)等反成恶化因素；应改用整数transform-origin、四舍五入动画值、避免非整数scale及优先采用position居中。
为什么Safari旧版对transform特别敏感
不是Safari“故意搞事”，而是它在 ≤15.6（尤其 iOS 15 及更早）中用了一套更激进的 GPU 渲染路径：一旦触发合成层，文字就被当位图纹理处理，插值全靠双线性滤波——没有抗锯齿兜底。亚像素坐标（比如 transform-origin: 50% 50% 在宽高为奇数的容器里算出 100.5px 200.5px）直接糊。Chrome 也会糊，但 Safari 的降级更彻底、更不可逆。
哪些“修复技巧”反而让问题更糟
网上流传的 translateZ(0) 或 will-change: transform 是典型误区：
-
transform: rotate(15deg) translateZ(0)会创建两个合成层，纹理叠加采样误差翻倍 -
will-change: transform在 Safari 旧版里等于“立刻上传低质纹理”，不是预告，是命令 -
filter: blur(0)或backface-visibility: hidden单独用基本无效；后者只在和transform-style: preserve-3d错误连用时才可能加重模糊
真正能落地的控制点
模糊不报错，必须从源头卡死渲染坐标：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 把
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 是整数）
移动端 Safari 特别要注意字体渲染降级
iOS Safari 对 subpixel rendering 极其敏感，仅靠 translateZ(0) 常无效。必须叠加：
立即学习“前端免费学习笔记（深入）”；
-
-webkit-font-smoothing: subpixel-antialiased（仅对主文档层生效；若元素已被祖先的transform连坐进合成层，这行就失效） text-rendering: optimizeLegibility- 若仍模糊，优先放弃
transform居中，改用position: fixed; top: 50%; left: 50%; margin: -Apx -Bpx—— 这种方式不触发合成层，保留子像素渲染能力
最隐蔽的风险在于：你本地看着清楚，是因为屏幕 DPR=2 或浏览器缓存了旧纹理；一换到 iOS 15 实机或 DPR=1 的 Windows 笔记本，糊得猝不及防。
