backface-visibility: hidden 能缓解滚动文字闪烁，因其强制创建独立GPU合成层，稳定渲染管线；但需与transform配合加在直接滚动元素上，且非万能解。
为什么 backface-visibility: hidden 能缓解滚动文字闪烁
滚动文字（比如用 或 CSS 动画 + transform: translateX() 实现）在部分浏览器（尤其是旧版 Chrome、Safari 移动端）中容易出现闪烁，本质是 GPU 合成层渲染异常：文字图层被频繁重绘或层叠顺序错乱，导致像素抖动或透明度抽搐。
backface-visibility: hidden 的作用不是“隐藏背面”，而是强制浏览器为该元素创建独立的合成层（compositing layer），绕过 CPU 渲染路径，让文字始终走 GPU 纹理管线——这能稳定图层生命周期，减少 repaint 与 layer recomposite 冲突。
但要注意：它只是缓解手段，不是万能解。若文字本身含半透明、filter、或嵌套在 transform 缩放容器里，仍可能失效。
CSS 滚动动画中正确加 backface-visibility 的位置
必须加在**直接承载滚动内容的元素上**，且需配合 transform 触发硬件加速。常见错误是只加在父容器或文本子元素上。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：滚动容器（如
.scroller）同时设transform: translateZ(0)和backface-visibility: hidden - ❌ 错误：只给内部
加，而外层未触发合成层 - ❌ 错误：加了
backface-visibility却没配transform，浏览器可能忽略该声明
示例：
