Safari 必须同时写 -webkit-backdrop-filter 和 backdrop-filter 且值一致；Firefox 需手动开启 about:config 中两个开关；Chrome/Edge 滚动失效多因层叠上下文截断；模糊值推荐桌面端 blur(6px)、iOS 用媒体查询限为 blur(4px)。
backdrop-filter 在 Safari 中完全没反应？加 -webkit 前缀是硬性要求
不加 -webkit-backdrop-filter，Safari（包括 iOS 15.4 之前所有版本）会直接忽略整个声明——不是效果弱，是压根不解析。Chrome 和 Edge 虽已支持标准语法，但 Safari 仍强制依赖前缀，且必须和 backdrop-filter 同时存在，不能只写前缀版。
实操建议：
立即学习“前端免费学习笔记（深入）”；
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
-
-webkit-backdrop-filter和backdrop-filter必须成对出现，顺序无所谓，但缺一不可 - 值必须完全一致，比如都写
blur(8px)，不能一个用rem一个用px - 不要指望 autoprefixer 自动补全——它目前对 backdrop-filter 的前缀支持不稳定，必须手写
Firefox 里 backdrop-filter 失效？别怪代码，先看用户设置
Firefox 默认启用 layout.css.backdrop-filter.enabled，但很多企业环境或隐私模式下会禁用；更关键的是，它还依赖 gfx.webrender.all 开启硬件加速。用户没手动改过 about:config，大概率就是关着的。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 别在生产环境强依赖 Firefox 的 backdrop-filter——它本质是“增强项”，不是“功能项”
- 降级方案必须独立：用
@supports not (backdrop-filter: blur(1px))单独定义 fallback 样式，别混进同一规则块 - 如果真要兜底模糊，对背景图用伪元素 +
filter: blur(2px)，但注意这模糊的是图本身，不是背后内容
Chrome 或 Edge 滚动时模糊突然消失？检查是否触发了层叠上下文截断
backdrop-filter 只能捕获“当前层叠上下文”之下的内容。一旦父容器有 transform、will-change、opacity < 1 或 overflow: hidden，就会创建新上下文，导致模糊只作用于该容器内部，而非页面全局背景。
常见失效场景：
- 导航栏用了
position: fixed，但 body 上写了transform: translateZ(0) - 弹窗外层加了
overflow: hidden防滚动穿透，结果把 backdrop 采样区域一起裁了 - 卡片用了
border-radius+overflow: hidden，边缘模糊被硬切掉
临时调试方法：给模糊元素加 isolation: isolate，再配合 overflow: visible 看是否恢复。
blur 值设多少才稳妥？别迷信设计稿上的 12px
iOS Safari 对高模糊值极其敏感，blur(10px) 在 iPhone 14 Pro 上就可能卡顿，blur(12px) 在部分微信 X5 内核里直接失效；Chrome 桌面端虽支持更大值，但超过 blur(8px) 后文字可读性明显下降，尤其搭配浅色文字时。
推荐组合：
- 桌面端：用
blur(6px)+background-color: rgba(255,255,255,0.15) - iOS：用媒体查询限制
@media (max-width: 768px) { .glass { backdrop-filter: blur(4px); } } - 动画中切换模糊：只在过渡态加
transition: backdrop-filter 0.3s ease，避免 hover 瞬间启用
真正难的不是写出能跑的代码，而是判断什么时候不该用 backdrop-filter——比如长列表滚动区域里的悬浮按钮，模糊开销远超视觉收益，这时候用半透纯色反而更稳。
