Safari 必须写 -webkit-backdrop-filter，因其完全忽略无前缀声明；Chrome/Edge 支持标准语法但需与前缀版共存且值一致；Firefox 需手动开启 about:config 两个开关；滚动失效常因层叠上下文截断；iOS 安全模糊值为 4–6px，须媒体查询适配。
backdrop-filter 在 Safari 和 Chrome 中表现不一致，不是写法错了，而是两者对同一属性的解析机制、默认策略和性能约束根本不同——必须分浏览器针对性处理，不能靠“加前缀就完事”。
为什么 Safari 必须写 -webkit-backdrop-filter
Safari（包括 iOS 15.4 之前所有版本）完全忽略未带 -webkit- 前缀的 backdrop-filter 声明，不是效果弱，是压根不解析。Chrome/Edge 从 76 起已支持标准语法，但 Safari 仍强制要求前缀版与标准版同时存在。
-
-webkit-backdrop-filter和backdrop-filter必须成对出现，顺序无关，缺一不可 - 两个声明的值必须完全一致：都用
blur(6px)，不能一个写blur(0.375rem)一个写blur(6px) -
autoprefixer当前对backdrop-filter的前缀补全不稳定，别依赖它——必须手写
Firefox 里 backdrop-filter 失效？先查 about:config
Firefox 默认关闭 backdrop-filter，哪怕你代码完全正确，用户没手动开启，它就是不工作。
- 必须同时启用两个开关：
layout.css.backdrop-filter.enabled和gfx.webrender.all - 企业环境、隐私模式、部分国产浏览器内核（如微信 X5）大概率关着这两个开关
- 生产环境别强依赖 Firefox 的
backdrop-filter，把它当增强项，不是功能项 - 降级必须独立：
@supports not (backdrop-filter: blur(1px))单独包裹 fallback 样式，不能混进同一规则块
Chrome/Edge 滚动时模糊突然消失？检查层叠上下文是否被截断
backdrop-filter 只能捕获“当前层叠上下文”之下的内容。一旦父容器创建了新层叠上下文，模糊就只作用于该容器内部，而非页面真实背景。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- 常见触发条件：
transform（含translateZ(0)）、will-change、opacity < 1、overflow: hidden - 典型失效场景：弹窗外层加了
overflow: hidden防滚动穿透；卡片用了border-radius + overflow: hidden；body上写了transform: translateZ(0) - 临时调试：给模糊元素加
isolation: isolate，再设overflow: visible看是否恢复
blur 值设多少才不卡、不糊、不崩
iOS Safari 对高模糊值极其敏感，Chrome 桌面端虽支持更大值，但可读性会快速下降。
- iOS 实测安全范围是
blur(4px)～blur(6px)；blur(10px)在 iPhone 14 Pro 就可能卡顿，blur(12px)在微信 X5 内核里直接失效 - 桌面端推荐
blur(6px)，超过blur(8px)后浅色文字边缘发虚、可读性明显变差 - 务必用媒体查询区分：
@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2)下限制为blur(4px) - 别在循环渲染的列表项上用
backdrop-filter——只允许用于最外层遮罩容器（如模态框根节点、导航栏 wrapper）
真正难的不是写对语法，而是判断什么时候该用、什么时候该果断降级。模糊效果在滚动中掉帧、在旧设备上白屏、在用户禁用硬件加速时彻底消失——这些都不是边缘 case，而是日常上线必须面对的真实约束。
