scale()触发GPU合成层导致文字模糊的根本原因是文字脱离主渲染流后亚像素抗锯齿失效，降级为灰度插值；非整数缩放比（如scale(1.1)）引发双线性重采样，造成发虚、毛边；整数倍缩放（如scale(2)）则无此问题。
scale()触发GPU合成层，文字被当纹理拉伸
根本原因不是字体设置或DPR问题，而是transform: scale()强制浏览器把元素拎进独立GPU合成层——文字脱离主渲染流后，亚像素抗锯齿（subpixel antialiasing）直接失效，降级为灰度插值或完全关闭。这时候加-webkit-font-smoothing没用，因为控制权已不在CSS手里。
验证方式很简单：Chrome DevTools → Layers面板 → 悬停模糊文字，看到红色图层框就确认了。
非整数缩放比是主要诱因
scale(1.1)、scale(1.2)这类小数比会强制GPU做双线性重采样，笔画边缘被平均化，结果就是发虚、毛边、彩色镶边。而scale(2)、scale(0.5)这种整数倍缩放，像素映射一一对应，基本不糊。
- rotate(5deg)比rotate(90deg)更容易糊，角度越偏离整数倍90°，坐标映射误差越大
- 组合写法如
transform: scale(1.1) rotate(2deg)会叠加误差，风险更高 - iOS Safari对小数缩放更敏感，0.1的偏差在Retina屏上就能看出明显锯齿
真正该动的是容器，不是文字本身
别对<p>、<h2>这些纯文本元素直接加scale()。把动画逻辑上移到父容器上，让文字始终和背景共处同一图层：
立即学习“前端免费学习笔记（深入）”；
.card { transform: scale(1.1); } /* ✅ 安全 */
.card p { transform: scale(1.1); } /* ❌ 文字被隔离 */
如果必须局部放大某段文字，优先用font-size过渡替代scale()——它不触发图层提升，抗锯齿全程可控。
容易被忽略的“帮凶”属性
有些属性看着无害，实则一加就让文字进红框：
- 删掉
backface-visibility: hidden——它不解决模糊，只防翻转抖动 - 避免
opacity: 0.99这类“几乎不透明”的值，要么opacity: 1，要么不用 - 别给文字容器设
will-change: transform，它会提前创建合成层 - 检查
filter是否被继承，哪怕filter: blur(0)也足以触发新图层
最麻烦的是复合异常：当scale + border-radius + overflow: hidden + 高DPR叠加时，得靠Layers面板逐项开关定位，不能凭经验乱试。
