不能直接用::backdrop做兼容fallback，因其在Safari 15.4前不支持、IE全无视，且仅在dialog.showModal()调用后才生成DOM节点；手动实现需同级插入.backdrop元素并严格同步生命周期。
为什么不能直接用::backdrop做兼容 fallback
::backdrop在 Firefox 47+、Chrome 37+、Edge 79+ 中可用，但 Safari 15.4 之前完全不支持，IE 所有版本无视它。更关键的是：它只在 dialog.showModal() 调用后才生成 DOM 节点——没调用就根本不存在，连样式都无从生效。调试时 DevTools 里找不到 ::backdrop？先确认 JS 是否真的执行了 .showModal()，而不是只设了 open 属性或用了 display: block 模拟。
手动实现一个可替代的.backdrop层
核心思路是用真实 DOM 元素替代伪元素，绕过浏览器限制。这不是“模拟”，而是“重做”：
- 必须用独立的
<div class="backdrop"></div>，与<dialog>同级（不能嵌套在 dialog 内部） - 设
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;，确保覆盖全屏 - 用
z-index控制层级：比如.backdrop { z-index: 100; }，dialog { z-index: 101; } - 避免用
opacity控制显隐——它会触发重绘；改用visibility: hidden+transition，或 JS 切换display: none - 若需模糊效果，给
.backdrop加background-image: url(...)+filter: blur(6px)，但注意性能代价
如何让手动 backdrop 不盖住 position: fixed 元素
原生 ::backdrop 本身就盖不住 position: fixed 元素（比如顶部导航栏），这是它的固有限制，不是 bug。手动方案也一样——只要 fixed 元素的 z-index 高于 backdrop，它就会“漏光”。解决办法只有两个：
- 把需要遮挡的 fixed 元素（如导航栏）移进
<dialog>内部，再用 CSS 定位还原视觉位置 - 或者，放弃“遮挡”，改用 JS 临时禁用 fixed 元素的交互：
document.querySelector('.nav').style.pointerEvents = 'none' - 别指望靠提高
.backdrop的z-index解决——如果 fixed 元素没有建立新的层叠上下文，它天然就在视口层最上
模糊效果在低端设备上卡顿怎么办
filter: blur() 是高开销操作，尤其在伪元素或固定层上叠加使用时。iOS Safari 和 Android 中低端机型上，blur(10px) 就可能引发滚动掉帧或闪烁：
立即学习“前端免费学习笔记（深入）”；
- 模糊值建议控制在
blur(4px)～blur(8px)之间，视觉上已有明显虚化，性能也较稳 - 避免和
transform、opacity动画同时作用于同一元素，某些 Chrome 版本会跳过硬件加速 - 如果容器宽高动态变化（比如响应式弹窗），
background-size: cover必须配background-position: center，否则模糊图拉伸变形，边缘出现锯齿 - 真正适配多分辨率的解法只有 SVG 内联背景：
background-image: url("data:image/svg+xml,...")，但仅适合纯色/渐变类背景
