backdrop-filter生效需满足三条件：背景半透明（如rgba）、父容器无overflow:hidden等截断属性、双写-webkit-backdrop-filter适配Safari；否则模糊失效。
Backdrop-filter 在模态框中不生效？检查这三件事
直接说结论：backdrop-filter 要起作用，必须满足「背景可透、层级可叠、渲染可启」三个硬条件，缺一不可。常见情况是卡片背景设了纯色（比如 background: #fff），或父容器没开透明通道，结果模糊完全看不见。
- 确保模态框自身背景是半透明的——用
background: rgba(255, 255, 255, 0.8)或background: hsla(..., 0.8)，别用opacity，它会模糊整个元素（含文字） - 确认模态框的父容器（比如遮罩层
.overlay）没有设置overflow: hidden或isolation: isolate以外的隔离属性，否则会截断背景合成链 - 某些浏览器（尤其是旧版 Safari 和部分安卓 WebView）需要加
-webkit-backdrop-filter，且必须配合backdrop-filter双写才稳妥
为什么用了 backdrop-filter 还是白底？和 z-index 无关，但和 stacking context 有关
模糊不是靠“盖在上面”实现的，而是靠“透过当前层看下一层再做滤镜”。所以如果模态框自己生成了独立 stacking context（比如设置了 transform、opacity < 1、will-change 等），而它下面那一层恰好是 <body> 或某个纯色容器，那它“看到”的就只是那层颜色，不是页面内容。
- 最简验证法：临时给模态框加
background: transparent+border: 1px solid red，看红色边框里是否透出底下滚动的内容——不透，说明背景被挡死了 - 解决路径通常是把模糊层（卡片）和内容层（页面主体）放在同一个 stacking context 下，例如避免对卡片祖先元素设
transform，或把模糊卡片直接挂到body下 - 慎用
position: fixed的同时又设transform: translateZ(0)，这会意外创建 stacking context，切断 backdrop 渲染链
Safari 上 backdrop-filter 模糊失效或卡顿？绕不开 -webkit- 和渲染策略
Safari（特别是 iOS 15.4 之前）对 backdrop-filter 支持极不稳定：有时只模糊一次、滚动后消失；有时开启模糊就掉帧。这不是代码写错，是 WebKit 的合成策略限制。
- 必须双写：
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);，漏掉-webkit-在 Safari 下等于没写 - 避免在
scroll频繁触发的区域（如position: sticky卡片）用高值模糊（>10px），iOS Safari 会降级为静态快照甚至禁用 - 如果内容区域有
video、canvas或 WebGL，Safari 可能直接禁用 backdrop-filter —— 这是已知限制，无 hack，只能降级为纯色遮罩
如何优雅降级？别用 @supports 做唯一判断
@supports (backdrop-filter: blur(1px)) 能识别语法支持，但不能反映实际渲染能力（比如 Safari 声称支持却静默失败）。真要稳，得结合行为检测 + 视觉 fallback。
立即学习“前端免费学习笔记（深入）”；
- 简单降级方案：先写模糊样式，再用
@supports not (backdrop-filter: blur(1px))或 JS 检测后加 class，切换为background: rgba(255, 255, 255, 0.92)+ 轻微阴影模拟层次感 - 更准的 JS 检测不是查 CSS 支持，而是测真实渲染：创建一个带
backdrop-filter的元素，插入 DOM，用getComputedStyle读取其backdropFilter值，再对比是否生效（需注意异步渲染时机） - 别忘了深色模式适配——模糊本身不改颜色，但
rgba(255,255,255,0.8)在深色背景下会发灰，建议用color-scheme: light dark配合background: rgb(255 255 255 / 0.8)写法提升兼容性
真正麻烦的从来不是怎么写那一行 backdrop-filter，而是你没法只靠它就控制用户看到什么。渲染链断裂、平台策略变更、合成上下文隐式创建……这些地方一动，模糊就没了，而且往往没报错。
