根本原因是浏览器对fixed元素背后动态内容实时模糊导致GPU合成压力陡增，iOS Safari和微信X5内核易白屏或失效；应优先用sticky替代fixed，禁用transform/will-change干扰，确保父级有明确高度且无overflow:hidden。
backdrop-filter 为什么在 position: fixed 里容易失效或卡顿
根本原因是浏览器对固定定位元素背后的动态内容做实时模糊时，GPU 合成压力陡增，尤其在滚动过程中。iOS Safari 和微信 X5 内核会直接放弃渲染或白屏，不是代码写错，而是渲染管线扛不住。
常见现象包括：导航栏突然变实色、文字闪烁、滑动几帧后毛玻璃消失、甚至整个区域留白。
- 别在
position: fixed元素上叠加transform: translateZ(0)或will-change: transform—— 它们会切断 backdrop 的采样路径 - 确保其父级（比如
）有明确高度，且未设overflow: hidden - 优先改用
position: sticky，尤其当侧边栏/导航栏高度小于视口时，渲染压力小得多
position: absolute 为什么有时“滤了个寂寞”
因为没设 z-index 导致它和底层内容同层，背后实际是 body 白底或空容器，backdrop-filter 根本无内容可模糊。
验证方法：临时加 background: rgba(255, 255, 255, 0.5) 和 border: 1px solid red，看模糊是否出现在红框背后。没出现，就是层级或背景源出了问题。
立即学习“前端免费学习笔记（深入）”；
- 必须显式设置
z-index，且值要高于下方内容所在层叠上下文 - 避免把它塞进
overflow: hidden的祖先容器里（比如 Bootstrap 的.navbar-collapse），否则裁剪掉模糊所需的扩散像素 - 别在它的父级上用
opacity—— 会创建隔离合成层，子元素的backdrop-filter全部失效
transform 和 isolation 怎么悄悄破坏毛玻璃
transform、will-change、isolation: isolate 都会触发新层叠上下文，而 backdrop-filter 只能采样「当前层叠上下文内」的视觉后方内容。一旦被隔离，背后就只剩透明或空白。
iOS Safari 尤其敏感，哪怕只在父容器写了 transform: scale(1)，也可能让毛玻璃归零。
- 禁用
transform: translateZ(0)来“提升图层”——这是 filter 的套路，对 backdrop-filter 是反效果 - 若必须隔离，用
isolation: isolate加在毛玻璃元素**自身**，而不是它的父容器 - 慎用
will-change: backdrop-filter，仅在大模态框等明确需要提前触发合成的场景才加
backdrop-filter: blur(8px)，而是判断哪一层祖先偷偷加了 overflow: hidden、哪个 transform 正在截断采样路径、甚至微信 X5 内核对 position: fixed 的硬性限制——这些细节不排查到，毛玻璃永远“滤了个寂寞”。 
