scale会让文字变模糊，因GPU位图缩放绕过字体光栅化，致亚像素渲染失效；推荐用translate+opacity替代，必要时用scale(1.02)或scale+translateZ(0)保底，避免will-change、backface-visibility和perspective干扰。
为什么 scale 会让文字变模糊
浏览器对 transform: scale() 的实现通常基于 GPU 加速的位图缩放，而非重排版。文字被当作纹理拉伸，尤其在非整数倍缩放（如 scale(1.2)）时，亚像素渲染失效，边缘出现毛边或发虚。这不是抗锯齿开关问题，而是渲染管线绕过了字体光栅化流程。
用 transform: translate + opacity 替代缩放入场
多数“放大出现”动效其实只需强调进入感，不真需要尺寸变化。用位移和透明度组合既能保持文字清晰，又符合视觉预期：
.fade-in-up {
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.3s ease-out forwards;
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
- 避免任何
scale、rotate等会触发纹理缩放的变换 - 若必须有“轻微放大”暗示，可用
scale(1.02)—— 但仅限整数 DPI 屏幕且动画极短（≤0.15s），否则风险仍高 - 确保父容器未设置
will-change: transform，它可能强制启用低质量缩放路径
实在要缩放？加 translateZ(0) 强制高质量光栅化
某些浏览器（如 Chrome）在开启硬件加速层后，会对文字重新走高质量字体光栅化。但该方式不稳定，仅作保底：
.safe-scale {
transform: scale(1.1) translateZ(0);
/* 注意：必须同时存在 translateZ(0) 和 scale，单独写无效 */
}-
translateZ(0)必须和scale在同一transform值中声明 - 在 macOS Safari 上基本无效；Windows Chrome 110+ 效果较好，但动画帧率可能下降
- 不要对大量文字或长段落使用，GPU 内存开销明显上升
检查是否被 backface-visibility 或 perspective 拖累
这两个属性会隐式创建合成层，有时反而干扰文字渲染质量，尤其与 scale 叠加时：
立即学习“前端免费学习笔记（深入）”；
- 移除无意义的
backface-visibility: hidden—— 它只在 3D 变换翻转时有用 - 避免给文字容器设
perspective，哪怕值很小（如perspective: 1px） - 用 Chrome DevTools 的
Rendering > Paint flashing查看文字区域是否被标为“composite layer”，若是，说明正被降质处理
文字模糊常被归咎于“没开抗锯齿”，实际是渲染路径选择错误。真正可控的解法，是避开缩放本身。
