Chrome下filter导致文字模糊的根源是GPU合成时文本双线性插值降质，而非GPU未开启；应让文字脱离filter容器（如用伪元素实现毛玻璃），而非添加translateZ(0)或will-change。
Chrome 下 filter 导致文字模糊，不是因为 GPU 加速没开，而是开了之后光栅化策略变差——translate3d 或 translateZ(0) 不仅不能修复，反而可能让糊感更稳定、更难回避。
为什么加 transform 会让 filter 下的文字更糊
给一个带 filter: blur(4px) 的容器加 transform: translateZ(0)，等于主动把它和子元素（包括文字）一起送进 GPU 合成管线。Chrome 在 GPU 模式下对文本做双线性插值，尤其在非整数缩放或亚像素位移时，边缘直接“发毛”。这不是性能问题，是渲染路径切换带来的质量降级。
- 文字本身没动，但父层升层后，它被裹进模糊区域参与光栅化
-
transform: translate3d(0,0,0)和filter同时存在，Chrome 会合并图层；一旦合并失败，退回到 CPU 渲染，糊得更不一致 - 移动端（尤其 Android WebView）对这种组合极其敏感，同一段 CSS 在 Chrome 115 和 124 上糊的程度可能完全不同
真正该检查的三处 DOM 结构与样式链
模糊根源不在“怎么加速”，而在“谁被模糊了”。打开 Chrome DevTools → Layers 面板，看文字是否被框进红色图层里——只要标红，说明它已被卷入 filter 的合成上下文。
- 别把文字放在
filter容器内部：错误写法是<div class="glass"><h2>标题</h2></div>+.glass { filter: blur(8px); } - 正确结构是用伪元素承载模糊：
.glass::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; backdrop-filter: blur(8px); }，再让<h2>脱离该层 - 如果必须复用现有结构，给文字加
backface-visibility: hidden（Chrome 110+ 有效），或强制重置其光栅化上下文：h2 { transform: translateZ(0); will-change: transform; }——但这只是补救，不是根治
静态模糊场景下，will-change 和 translateZ(0) 全都该删掉
如果你只是做一个毛玻璃背景上的标题，没有 hover 动画、没有 JS 切换 filter 值，那 will-change: filter 或 transform: translateZ(0) 一点作用没有，只多占显存、多建一层、多一次合成开销。
立即学习“前端免费学习笔记（深入）”；
- DevTools Layers 面板里能看到大量闲置的 “Composited” 图层堆积，尤其在列表页中每个卡片都这么写
- iOS Safari 对
will-change: filter支持极差，常导致 backdrop-filter 失效或白屏 - 替代方案更轻量：
text-shadow: 0 0 4px rgba(0,0,0,0.1)模拟轻微虚化，完全绕过合成层，且字体渲染走原生路径
最易被忽略的一点：模糊不是 bug，是 Chrome 主动选择的渲染权衡。你越想用 transform 强行“加速”，就越把它锁死在 GPU 插值路径里。控制权不在你怎么加属性，而在于让文字节点物理上脱离 filter 影响范围——结构比样式优先级高得多。
