必须手写-webkit-backdrop-filter且与backdrop-filter成对出现，Safari要求二者值完全一致、缺一不可；仅写其一或单位混用均失效，Autoprefixer不可靠，需手动补全。
必须手写 -webkit-backdrop-filter，且和 backdrop-filter 成对出现——Safari 不认单独的标准写法，也不靠 Autoprefixer 自动补。
为什么加了 -webkit- 还是没效果？
Safari（包括 iOS 16.6 及更早所有版本）要求两个声明同时存在、值完全一致，缺一不可。只写 -webkit-backdrop-filter 或只写 backdrop-filter 都会失效。
-
-webkit-backdrop-filter: blur(6px)和backdrop-filter: blur(6px)必须都写，单位和数值不能混用（比如一个用px，一个用rem） - 顺序无所谓，但别指望 Autoprefixer —— 它对
backdrop-filter的前缀注入目前不可靠，2026 年中仍需手动补全 - Firefox 虽然也支持
-moz-backdrop-filter（已废弃），但加了也没用；它根本不实现该特性，@supports检测才是正路
@supports 在 Safari 里怎么写才不翻车？
别用 @supports (-webkit-backdrop-filter: blur(1px)) —— Safari 会识别它，但 Firefox 可能误判为“支持”，导致降级样式被跳过。
- 只用标准语法检测：
@supports (backdrop-filter: blur(1px))，这是 Safari 15.4+ 和 Chrome/Edge 的共同判断依据 - 降级样式必须写在
@supports块外层，例如先定义background: rgba(255, 255, 255, 0.8)，再在@supports内覆盖为rgba(255, 255, 255, 0.3)+backdrop-filter - 注意 Safari 的
@supports有延迟报告问题：iOS 16.4 之前版本可能返回false，即使实际渲染正常；线上项目建议把@supports当作“增强开关”，而非功能开关
元素明明写了前缀，Safari 里还是白屏或模糊消失？
这不是兼容性问题，而是渲染机制限制：Safari 要求元素满足三个硬条件才能触发 backdrop 模糊采样。
立即学习“前端免费学习笔记（深入）”；
- 背景必须半透明：
background-color: transparent或rgba(255, 255, 255, 0.5)，纯色背景会遮挡背后内容 - 必须创建层叠上下文：加
position: relative+z-index，或transform: translateZ(0)；但注意transform若加在父容器上，可能截断采样范围 - 背后必须有可模糊的内容：不能是纯色
body背景，得是图片、渐变、或其它 DOM 元素；如果父容器用了overflow: hidden或position: fixed，也会切断采样链
blur 值设多少才不会在 iPhone 上卡顿或失效？
iOS Safari 对高模糊值极其敏感，不是“越强越好”。微信 X5 内核、部分企业定制 WebView 更容易出问题。
- 桌面端稳妥值是
blur(6px)，最大别超blur(8px)；超过后文字边缘易糊，滚动时帧率明显下降 - iOS 设备统一用
blur(4px)，并通过媒体查询隔离：@media (max-width: 768px) and (pointer: coarse)或直接@supports (-webkit-backdrop-filter: blur(1px)) and (prefers-reduced-motion: reduce) - 别用
blur(12px)—— 在 iPhone 14 Pro 上已观察到卡顿，在部分微信环境里直接退化为无效果
真正难的不是写对前缀，而是搞清 Safari 的 backdrop 采样边界在哪：它既依赖 CSS 层叠规则，又受硬件加速开关、WebView 内核版本、甚至系统级动画偏好影响。上线前务必在真机（尤其是 iOS 15.2–16.5 系列）上验证滚动、弹窗、深色模式切换三个场景。
