backdrop-filter 在 sticky 导航栏生效需同时满足背景可穿透、堆叠上下文完整、父容器不裁剪采样区三条件；缺一即变纯白或无反应，核心是渲染链未断裂而非样式错误。
backdrop-filter 要在 sticky 导航栏上生效，必须同时满足「背景可穿透」「堆叠上下文完整」「父容器不裁剪采样区」三个条件——缺一就会变成纯白块或完全无反应。
为什么 position: sticky 导航栏加了 backdrop-filter 却没模糊？
不是写错了，是渲染链断了。sticky 元素本身不创建新的层叠上下文，如果它直接挂在 <body> 下，而 body 只有纯色背景（比如 background-color: #fff），那背后根本没有像素可模糊。
- 确保导航栏下方有真实视觉内容：比如
<div class="hero">带background-image或滚动时露出的图文区块 - 避免给导航栏父容器设
overflow: hidden或contain: strict，它们会截断 backdrop 的采样范围 - 不要用
opacity替代透明背景——它会让文字也变透明，破坏「前景清晰 + 背景柔化」的核心体验
backdrop-filter 在 sticky 导航栏上的最小可行配置
以下是最简但能跑通的组合，去掉任何一项都可能失效：
.nav-bar {
position: sticky;
top: 0;
z-index: 100;
background-color: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
-
z-index必须显式设置，否则在部分安卓 WebView 中会降级到默认层，导致采样失败 -
background-color: rgba(..., 0.12)是关键阈值：低于 0.1 文字易发虚，高于 0.2 毛玻璃感弱化 -
blur(8px)是 sticky 场景的甜点值：比blur(4px)更通透，又比blur(12px)更稳帧率
Firefox 用户看到的是白卡片？这是预期行为，不是 bug
Firefox 默认禁用 backdrop-filter（layout.css.backdrop-filter.enabled = false），且不提供运行时开启开关。@supports 检测只返回 false，无法“启用”该特性。
立即学习“前端免费学习笔记（深入）”；
- 别写
@supports (backdrop-filter: blur(1px)) { ... }然后只在内部加样式——Firefox 用户将完全失去背景层 - 降级方案要独立存在：
background-color: rgba(255, 255, 255, 0.15)+border-radius: 12px+box-shadow: 0 2px 12px rgba(0,0,0,0.05) - 不要叠加
filter: blur()作 fallback——它会模糊文字，和毛玻璃逻辑冲突
动效卡顿或滚动掉帧？检查这三个地方
blur 值本身不是唯一瓶颈；真正拖慢的是合成层触发时机和采样区域大小。
- 避免在
.nav-bar上写will-change: transform——sticky 元素不适用此优化，反而增加内存开销 - 如果导航栏内含 SVG 图标或复杂伪元素，把它们设为
isolation: isolate，防止模糊溢出干扰 - 在中低端安卓设备上，
blur(10px)+ 高分辨率背景图容易触发 GPU 内存不足，建议用blur(6px)+background-color: rgba(255,255,255,0.1)组合保底
毛玻璃效果本质是层间关系的产物，不是单个 CSS 属性的开关。调试时优先确认「背后有没有东西」「能不能透过去」「采样区有没有被裁掉」——而不是反复调 blur 数值。
