backdrop-filter在HTML编辑器中失效，主因是沙箱iframe隔离导致背后无内容可模糊；需三层结构（真实背景+半透容器+可见内容）、双前缀@supports检测及合理blur值（4–8px）才能生效。
在 HTML 编辑器里写 backdrop-filter 却没效果，不是你代码错了，而是编辑器本身切断了它赖以生效的渲染链路。
为什么 CodePen/JSFiddle/StackBlitz 里 backdrop-filter 总是白屏？
主流在线编辑器默认把你的 HTML 塞进一个 sandboxed iframe，且启用了 contain: layout paint 或类似隔离策略——这直接阻断了 backdrop-filter 所需的「背后内容可见性」。它不是模糊自己，而是模糊 iframe 外层、甚至 body 背后的像素；一旦被隔离，背后就是纯白或透明，滤镜自然无事可做。
- 检查预览 iframe 是否带
sandbox属性；若有，必须显式加allow="backdrop-filter" - 确认编辑器是否用
file://协议（如 VS Code Live Server 本地启动），Chrome 会静默禁用该特性——必须走http://或https:// - 别依赖编辑器自带的「预设背景」，
body必须有真实内容：比如background: linear-gradient(...)或background-image，不能只靠编辑器 UI 的灰底
最小可运行结构：三层堆叠缺一不可
毛玻璃不是单个 CSS 属性能搞定的视觉效果，它强制依赖 DOM 层级与渲染上下文的配合。编辑器中要让它动起来，必须手动构造这三层：
-
底层：给
<body>加明确背景，例如background: url("data:image/svg+xml,...")或渐变，且不能被其他全屏元素覆盖 -
中间层：一个半透容器，
background-color: rgba(255,255,255,0.1)（不能是transparent），并带backdrop-filter: blur(8px)和-webkit-backdrop-filter: blur(8px) -
上层：容器内要有实际内容（文字、按钮等），且不能被额外的不透明遮罩包裹（比如嵌套一个
div并设background: white）
漏掉任意一层，效果就断掉——这不是 bug，是规范行为。
立即学习“前端免费学习笔记（深入）”；
@supports 检测必须双前缀并列，单写等于裸奔
仅用 @supports (backdrop-filter: blur(1px)) 会把 iOS 15.2 前 Safari、部分 WebKit 内核放行，结果是白屏或卡死。生产环境必须写成：
@supports (backdrop-filter: blur(1px)) and (-webkit-backdrop-filter: blur(1px)) {
.glass {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
background-color: rgba(255, 255, 255, 0.12);
}
}
降级样式里 background-color 的 alpha 值得明显提高（比如 rgba(255,255,255,0.7)），否则在微信 X5 内核等场景下文字直接不可读。Firefox 目前仍不支持，别指望检测后“启用”，只能提供视觉近似 fallback：半透底色 + box-shadow + 圆角。
position: fixed 或 transform 触发的合成层异常
当你在编辑器里给玻璃卡片加 position: fixed 或父容器有 transform: translateZ(0)，某些 Chrome 版本（尤其 112–118）会出现模糊区域错位、边缘发虚甚至完全消失。这不是配置问题，是浏览器合成图层调度冲突。
- 临时解法：改用
position: absolute+ 显式top/left定位，避开 fixed 触发的视口锚定逻辑 - 若必须 fixed，加
will-change: transform强制提前创建合成层，但注意这会增加内存开销 - 避免在同一个元素上同时用
backdrop-filter和filter: blur()，安卓 WebView 可能直接卡死
最常被忽略的一点：blur 值不是越大越高级。超过 blur(12px) 后，iOS Safari 滚动帧率明显下降，而 blur(4px)～blur(8px) 在绝大多数设备上既能保通透感，又不牺牲文字锐度和性能。
