dialog::backdrop 不支持 backdrop-filter，因规范限定其仅作用于可被用户看到背景的元素，而 ::backdrop 是合成层；Chrome/Edge 120+ 已支持，Safari/Firefox 仍不支持。
backdrop-filter 不能直接用在 ::backdrop 上
全屏弹窗（比如 dialog 元素调用 showModal()）打开时，浏览器会自动渲染一个半透明的 ::backdrop 伪元素作为背景层——但它**不支持 backdrop-filter**。直接写 dialog::backdrop { backdrop-filter: blur(10px); } 在绝大多数浏览器里完全无效，连 DevTools 都不会显示该样式生效。
常见错误现象：backdrop-filter 属性在 ::backdrop 上被灰色划掉、控制台无报错、背景仍是纯色或透明，毫无模糊效果。
- 根本原因：CSS 规范中明确限定
backdrop-filter只能作用于「自身背景可被用户看到」的元素，而::backdrop是一个合成层（composited overlay），不参与常规渲染流水线 - 兼容性现状：Chrome 120+、Edge 120+ 已支持
dialog::backdrop的backdrop-filter，但 Safari 和 Firefox **至今不支持**（截至 2024 年中） - 真实使用场景：你真正在意的是「用户看到的对话框背后内容是否模糊」，而不是「这个伪元素有没有被滤镜处理」
真正起效的做法：把模糊层套在 <dialog> 外部
绕过 ::backdrop 的限制，最稳定的方式是手动创建一个同尺寸、同层级的模糊容器，盖在 body 内容上，再把 <dialog> 放在它上面。关键在于层级和尺寸同步。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用一个
<div id="backdrop-blur">作为模糊层，初始display: none - 调用
dialog.showModal()前，用 JS 设置该<div>为display: block，并用getBoundingClientRect()或document.body.scrollHeight动态撑满视口 -
<dialog>必须设置position: relative或更高 z-index，确保它浮在模糊层之上 - 模糊层样式必须含
backdrop-filter: blur(12px)+background: rgba(0,0,0,0.3)（透明度不能为 0，否则滤镜失效）
示例关键 CSS：
#backdrop-blur {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
backdrop-filter: blur(12px);
background: rgba(0,0,0,0.3);
z-index: 9998;
display: none;
}
dialog {
z-index: 9999;
position: relative;
}
Firefox / Safari 用户必须降级处理
这两个浏览器对 backdrop-filter 的支持始终卡在「仅支持 <iframe> 和某些特定容器」，且拒绝扩展到自定义 overlay 层。如果你的用户群包含大量 Firefox 或旧版 Safari 用户，强行依赖 backdrop-filter 会导致背景层完全无模糊、只有灰蒙蒙一层，体验断层。
可行方案：
- 用
@supports (backdrop-filter: blur(1px))包裹模糊样式，未命中时 fallback 到纯色遮罩 + 轻微 opacity 动画 - 更稳妥的降级：生成一张带高斯模糊的 base64 背景图（用 Canvas 截图 + 模糊算法），设为模糊层的
background-image（仅首次弹窗时生成，避免性能问题） - 不要试图用
filter: blur()作用于 body —— 它会模糊整个页面包括 dialog 自身，且强制重绘开销极大
性能敏感点：避免 layout thrashing 和重复计算
每次弹窗打开都去测量 body 高度、重设模糊层尺寸，容易触发强制同步布局（layout thrashing），尤其在滚动中快速开关 dialog 时会卡顿。
优化要点：
- 模糊层尺寸用
position: fixed+inset: 0替代 JS 计算，浏览器原生保证贴合视口 - 如果页面允许，把模糊层挂载到
document.documentElement下而非body，避开 body 滚动偏移干扰 - 慎用
resize监听器实时调整模糊层——现代浏览器缩放/横竖屏切换极少影响弹窗背景模糊需求，通常只在showModal()前更新一次足够 - 注意：Safari 对
backdrop-filter的硬件加速不完善，开启后若出现闪烁或锯齿，可在模糊层加transform: translateZ(0)强制 GPU 合成
真正难的不是写对那行 backdrop-filter，而是让模糊只作用于背景、不拖慢滚动、不闪退、不把 dialog 自己也糊掉——这些边界情况，往往在真机弱网环境下才突然暴露。
