macOS系统级缩放（Cmd+/Cmd-）触发GPU双线性插值，使文字从亚像素抗锯齿退化为灰度抗锯齿，导致发虚、毛边、彩色渗色；其本质是WebView整体纹理缩放，与CSS transform无关，但叠加transform、opacity或filter会强制升层，进一步破坏渲染。
macOS缩放手势触发的是系统级渲染降级，不是CSS动画本身的问题
macOS的Cmd + / Cmd -缩放不是网页内transform，而是整个WebView被系统拉进GPU纹理并做双线性插值——文字直接从亚像素抗锯齿（subpixel AA）退化为灰度抗锯齿（grayscale AA），边缘立刻发虚、毛边、出现彩色渗色。这和你在CSS里写scale()完全不是一回事，但表现相似，容易误判。
常见错误现象包括：
– 页面放大后标题文字明显变细、发灰，尤其在font-size: 14px或更小时
– 滚动+缩放同时发生时，文字区域频繁“闪一下”再重绘
– DevTools → Rendering → “FPS Meter”显示帧率骤降，Layer Borders里文字突然被框进独立绿色图层
哪些CSS属性会在缩放状态下雪上加霜
系统缩放已让渲染路径变脆弱，此时以下CSS会进一步破坏稳定性：
-
backface-visibility: hidden：哪怕没做3D变换，它也会强制创建新合成层，把文字从主图层剥离 -
opacity: 0.99或filter: blur(0)：非1的opacity、任何filter都会升层，文字立刻失去亚像素渲染资格 -
transform: scale(1.05)叠加系统缩放：双重缩放导致坐标落到0.5像素边界，浏览器强制舍入，抖动肉眼可见 -
font-size用rem/em且根元素font-size被动态改过：缩放后计算值含小数（如16.375px），line-height同步失准，逐行跳动
真正有效的缓解手段（非根治）
无法禁用系统缩放，只能收束渲染路径：
立即学习“前端免费学习笔记（深入）”；
- 给所有文本容器加
-webkit-font-smoothing: subpixel-antialiased !important——仅对WebKit有效，但macOS Safari/Chrome默认就是这个值，加了未必改善；若已设成antialiased，务必改回来 - 删掉所有
text-rendering: optimizeLegibility：它启用连字和激进字距，在缩放下放大渲染误差，反而加重模糊 - 避免
transform-origin设为top left等非整数锚点：缩放时坐标偏移更易落入亚像素区间；优先用center或显式50% 50% - 检查
viewportmeta是否含user-scalable=yes：iOS/macOS Safari在可缩放页面中对文字光栅化更保守，设为no（若业务允许）能稳定渲染路径
最容易被忽略的验证点：缩放≠动画，别用动画调试思路去查
缩放抖动不会出现在@keyframes里，也不受will-change影响。唯一可靠验证方式是：
– 打开Chrome DevTools → Rendering → 勾选“Layer Borders”和“Paint flashing”
– 按Cmd +缩放几次，观察文字区域是否从无绿框→突然出现绿框→又消失
– 出现绿框即说明文字已被拖进独立GPU图层，此时-webkit-font-smoothing已彻底失效，任何字体微调都白搭
这时候该做的不是调CSS，而是检查有没有无意义的transform、opacity或filter透传到了文字节点上——哪怕只有一处，就足以让整个子树升层。
