::backdrop仅在dialog.showModal()调用后生成，且受祖先层叠上下文限制，无法全屏覆盖； backdrop-filter在Safari/Firefox中不生效，需手动创建fixed遮罩层实现毛玻璃效果。
::backdrop 没有覆盖整个视口，不是样式写错了，而是它压根没被浏览器渲染出来——或者即使渲染了，也被祖先容器“截断”了。
dialog::backdrop 只在 showModal() 后存在，其他方式全无效
你写的 dialog::backdrop { background: rgba(0,0,0,0.5); } 本身没问题，但若没调用 dialog.showModal()，这个伪元素根本不会生成。DevTools 里查不到节点，控制台也无报错，就是静默失败。
-
<dialog open></dialog>→ 不触发::backdrop -
dialog.show()→ 不触发::backdrop -
dialog.open = true或直接设display: block→ 全无效 - JS 中调用
showModal()前，dialog尚未 append 到 document → 静默失败（不报错但无 backdrop）
祖先元素创建新层叠上下文，backdrop 被“框死”在局部
::backdrop 理论上应铺满视口，但一旦其父级（哪怕隔了几层）设置了 transform、filter、will-change、clip-path 或 overflow: hidden，就会创建新的层叠上下文（stacking context），导致 ::backdrop 只盖住该容器范围，而非全屏。
- 常见于封装的 Modal 组件：外层用了
position: absolute+transform: translateY(0)→ backdrop 只盖住那个绝对定位盒子 - 页面根容器设了
overflow: hidden（比如防滚动穿透）→ backdrop 渲染区域被裁剪 - 使用
isolation: isolate或contain: layout的祖先也会干扰
backdrop-filter 在 Safari/Firefox 中完全不生效
即使 ::backdrop 正确渲染，加了 backdrop-filter: blur(4px) 也大概率失效：
- Safari（所有版本）和 Firefox（至今无支持）会直接忽略该声明，DevTools 中样式被划掉，且无任何 warning
- Chrome/Edge 120+ 是靠内部 patch 实现的，非标准行为，不可依赖
- 规范明确要求：backdrop-filter 只作用于「背景可被用户看到」的元素，而
::backdrop是合成层 overlay，不参与常规渲染流水线
想稳定实现毛玻璃效果，必须手动建层：<div id="manual-backdrop"> + <code>position: fixed; inset: 0; backdrop-filter: blur(4px); background: rgba(0,0,0,0.3); z-index: 9998;，并在 showModal() 前显式显示它。
立即学习“前端免费学习笔记（深入）”；
全屏遮罩被盖住？z-index 和 fixed 定位都得对
::backdrop 的层级是浏览器内定的（总在 <dialog></dialog> 下、内容上），但它不继承你设的 z-index，也不能用 CSS 控制位置尺寸。一旦你发现遮罩“只盖住一半”，优先检查是否误用了 dialog 以外的元素（比如 <div class="modal">），或试图用 <code>::backdrop 给 video 全屏做背景——那是 video::backdrop，两套机制，互不兼容。
- 真正需要全屏遮罩时，
position: fixed; inset: 0;+ 显式z-index: 1060+是最可控方案 - 避免用
width: 100%; height: 100%—— 若父容器没高度，它就塌缩；必须用inset: 0或width: 100vw; height: 100vh; - iOS Safari 地址栏收放会导致
100vh失准，稳妥写法是min-height: 100vh;+background-repeat: no-repeat;
::backdrop 的本质是浏览器为模态语义提供的合成层快捷入口，不是通用遮罩工具。它不响应 DOM 状态变化、不支持调试、不跨浏览器一致——真要控场，就得亲手造层。
