iOS Safari缩放后文字模糊的根本原因是GPU合成层与字体亚像素渲染耦合：必须同时满足整数坐标、0.25倍数缩放比、显式声明-webkit-font-smoothing: subpixel-antialiased三条件。
移动端 transform 缩放后文字模糊，不是 CSS 写错了，而是 Safari 对合成层字体渲染极其敏感——必须同时满足整数坐标、整数缩放比、subpixel 字体策略三者，缺一不可。
为什么 iOS Safari 缩放后文字特别糊？
它把 transform 触发的图层提升和字体抗锯齿策略深度耦合：一旦元素进入 GPU 合成层，-webkit-font-smoothing 就只在特定条件下生效；而 scale(1.05) 这类非整数比缩放会让 16px 字体变成 16.8px 渲染宽度，GPU 只能插值，亚像素失效。
常见错误现象包括：
- hover 或点击态下卡片标题突然发虚，动完恢复
- 缩放动画结束瞬间文字“闪糊”一下
- 同一段代码在 Chrome 看着正常，Safari 里边缘泛白
必须加的三项硬性约束
仅写 transform: scale(1.2) 是无效的。iOS Safari 要求：
-
-webkit-font-smoothing: subpixel-antialiased必须显式声明（仅对主文档层有效；若祖先已带transform，这行会失效） -
scale()的参数必须是整数倍或 0.25 倍数：scale(1)、scale(1.25)、scale(0.75)安全；scale(1.1)、scale(1.3)高概率糊 - 元素宽高需为偶数（尤其当配合
translate(-50%, -50%)居中时），否则50%计算出小数像素，如width: 301px→translateX(-150.5px)
JS 动态缩放时怎么避免小数误差？
用 offsetTop、clientWidth 直接驱动 transform 几乎必出小数。正确做法是：
- 改用
getBoundingClientRect()获取整数像素边界，再Math.round()处理 - 缩放值不拼字符串，而是先计算再取整：
el.style.transform = `scale(${Math.round(scale * 100) / 100})`（保留两位小数仍不够，优先选 0.25 倍数） - 滚动或触控中实时更新时，套
requestAnimationFrame节流，防止连续写入非整数坐标 - 慎用
will-change: transform—— 在 Safari 中它常提前创建不稳定图层，反而加剧模糊
真正起效的最小可行写法
以下组合经实测在 iOS 17+ Safari 和 WKWebView 中稳定清晰：
.card {
width: 300px;
height: 200px;
-webkit-font-smoothing: subpixel-antialiased;
backface-visibility: hidden;
transition: transform 0.25s cubic-bezier(0.33, 1, 0.68, 1);
}
.card:hover {
transform: scale(1.25) translateY(-4px);
}
注意：300px 和 200px 是偶数；1.25 是 0.25 倍数；translateY(-4px) 是整数像素；backface-visibility: hidden 比 translateZ(0) 更稳妥，不额外触发图层分裂。
最常被忽略的一点：模糊是否真实存在，得打开 Safari 的「Develop > Show Web Inspector > Layers」面板确认标红区域——没标红，说明根本没进合成层，那问题就不在 transform 上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
