CSS动画触发GPU加速会导致文字从亚像素抗锯齿退化为灰度抗锯齿而发虚，应避免对文本直接应用transform/opacity/will-change，优先将动画写在父容器、保持文字与背景共图层，并结合-webkit-font-smoothing和isolation等属性按设备微调。
动画触发了GPU加速，但导致文字渲染降级
CSS动画中用 transform: translateZ(0)、will-change: transform 或 opacity 等触发硬件加速时，浏览器会把元素提升为独立图层，交由GPU合成——这会让文字从亚像素抗锯齿（subpixel AA）退化为灰度抗锯齿（grayscale AA），看起来发虚、毛边、不锐利。
常见现象：按钮文字、导航栏标签、卡片标题在 hover 动画开始后突然“糊一下”，动完又恢复；Safari 和旧版 Chrome 尤其明显。
- 优先用
transform: translate3d(0, 0, 0)替代translateZ(0)，后者在某些安卓 WebView 中兼容性更差 - 避免对纯文本容器（如
<h2>、<p>）直接加will-change，应作用于其父容器，让文字保留在主图层 - 如果必须动文字本身，加
-webkit-font-smoothing: antialiased+backface-visibility: hidden双保险（仅对 WebKit 有效）
font-smoothing 和 text-rendering 的实际效果差异
-webkit-font-smoothing 是 Safari/Chrome 的私有属性，text-rendering 是标准属性，但两者控制维度不同：前者管抗锯齿策略，后者管字形选择与排版优先级。设成 optimizeLegibility 有时反而加重模糊，因为启用了连字和更激进的字距调整，放大了渲染误差。
-
-webkit-font-smoothing: subpixel-antialiased强制启用亚像素渲染（仅限 macOS + WebKit，Windows 下无效） -
text-rendering: optimizeSpeed关闭连字和复杂字距，对中英文混排的小字号文本更清晰 - 不要全局设置
text-rendering: geometricPrecision，它会禁用所有字体微调，在动画中尤其容易暴露边缘锯齿
动画期间保持文字图层不分离的关键写法
核心原则：让文字始终和背景/容器共用一个合成图层，而不是被单独拎走。只要文字没被 transform、opacity、filter 等属性直接作用，通常就能保住主图层渲染质量。
立即学习“前端免费学习笔记（深入）”；
- 动画写在父容器上（比如
.card:hover .card-title改成.card:hover+transform），文字元素只负责响应 class 变化，不动自身样式 - 避免给文字元素设
transform: scale(1.05)这类直接变形，改用font-size配合transition: font-size（虽然性能略低，但渲染质量稳） - 如果必须用
opacity动画，加上isolation: isolate到父容器，防止它意外创建新图层影响子元素
移动端和 Safari 的特殊处理
iOS Safari 对图层提升更敏感，且默认禁用 subpixel AA；Android Chrome 60+ 后对 will-change 更激进，容易误提文字图层。单纯加 backface-visibility: hidden 在这些环境下可能无效，甚至加重问题。
- 对 iOS 加一条
-webkit-transform: translateZ(0) translateX(0)（两个 transform 组合能重置渲染上下文） - 慎用
will-change: transform，改用transform: translateZ(0.001px)这种极小位移来“骗”出 GPU 加速，同时不触发文字图层分裂 - 测试时务必真机打开 Safari 开发者工具 → “Rendering” 面板勾选 “Layers”，看文字是否单独成层
最麻烦的地方在于：没有一劳永逸的 CSS 规则，同一段代码在 Chrome DevTools 里看着清楚，到了 iPhone 上就糊——得靠 Layers 面板确认图层结构，再结合设备特性微调。别信“加一行 -webkit-font-smoothing 就解决”，那只是把问题藏得更深了。
