旧版 Safari（≤15.3）默认禁用 backdrop-filter，需手动开启实验性功能；属性顺序、祖先 overflow:hidden、will-change、不透明背景等均会导致失效；@supports 检测不可靠，须主动提供降级样式。
旧版 Safari（≤15.3）默认禁用 backdrop-filter，必须手动开启实验性功能
macOS Monterey（12.0）及更早系统中，Safari 15.3 及之前版本压根不解析 backdrop-filter，哪怕写了 -webkit-backdrop-filter 也完全没反应——这不是代码问题，是浏览器策略级关闭。你得手动进菜单栏：开发 → 实验性功能 → backdrop-filter，勾选启用。但注意：这个开关只对当前 Safari 进程生效，重启后自动关闭；且仅限本地调试，无法推给用户。
写了 -webkit-backdrop-filter 还是不模糊？检查声明顺序和祖先裁剪
Safari 15.2–15.4 对属性顺序敏感：-webkit-backdrop-filter 必须写在 backdrop-filter 前面，否则直接跳过。同时，任意祖先元素上存在 overflow: hidden 就会硬切掉模糊所需的像素扩散区域，视觉上像“没生效”。
-
-webkit-backdrop-filter: blur(6px);—— 必须第一行 -
backdrop-filter: blur(6px);—— 第二行，供现代浏览器识别 - 临时删掉所有祖先的
overflow: hidden，换成visible测试是否恢复 - 立刻移除
will-change: opacity或will-change: transform，它们会静默阻断背景采样
父容器或自身 background 不透明、背后无内容，backdrop-filter 就是空转
backdrop-filter 不模糊自己，只模糊它“背后”的像素。如果元素自身是 background: white，或者父容器是纯色块、body 是空白，那它根本没东西可模糊。
- 把
background-color: white改成background-color: rgba(255, 255, 255, 0.1)（alpha 在 0.05–0.2 之间较稳妥） - 确保毛玻璃层下方有真实内容：比如滚动的页面主体、图片背景、渐变色，而不是空 div
- 别给该元素或其任意祖先加
opacity，它会切断 backdrop 的采样路径 - Bootstrap 等框架常默认加
background-image: linear-gradient(...)，得显式设background-image: none !important
@supports 检测不可信，降级方案要主动兜底
@supports (backdrop-filter: blur(1px)) 在旧版 WebKit 中会返回 true，但它其实不工作——这是个伪支持陷阱。真正能筛掉 Safari 15.3 及更早版本的写法是：
@supports (backdrop-filter: blur(1px)) and (not (-webkit-backdrop-filter: blur(1px))) { ... }
但更实际的做法是：直接提供降级样式，不依赖检测逻辑。
- 默认用
background: rgba(255, 255, 255, 0.2)+box-shadow: 0 2px 12px rgba(0,0,0,0.08)模拟层次感 - 微信 X5 内核至今不支持，必须单独处理
- iOS 13.0–13.3 会静默失效，
@supports返回 false，但真机调试毫无意义——直接按不支持对待
最麻烦的不是写错几行 CSS，而是旧版 Safari 的行为不一致：同一段代码，在 Safari 15.2（手动开实验功能）下能跑，在 15.3（默认关）下彻底黑盒，而 15.4 又默认开但对 overflow 更敏感。真要覆盖，得把实验性开关、前缀顺序、祖先裁剪、背景透明度、降级样式全链路卡死。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
