dialog必须是body直接子元素，否则safari等浏览器会跳过backdrop渲染、坐标计算失效；祖先元素的transform/will-change/overflow会破坏其定位锚点；需用transform微调居中并补全backdrop样式。
dialog为什么在父容器里就错位或不显示
根本原因是 dialog 的定位逻辑依赖浏览器内置的模态层机制，一旦被包裹在非 直接子级的容器中（比如 <div class="app"> 或 <code><main></main>），Safari 和部分 Chrome 版本就会跳过 ::backdrop 渲染，甚至整个弹窗坐标计算失效——不是样式没写对，是浏览器压根没把它当模态元素处理。
常见现象包括：弹窗偏左上角、被裁剪、点击遮罩无反应、getBoundingClientRect() 返回空值。
-
<dialog id="dlg"></dialog>✅ 正确：必须是的直接子元素 -
<div class="wrapper"><dialog></dialog></div>❌ 错误：Safari 中 backdrop 消失，Chrome 可能错位 - 动态插入的
dialog必须用document.body.appendChild(dialog)，不能插进任意父节点
父容器 CSS 导致 dialog 偏移或消失
哪怕 dialog 在 下，如果它的某个祖先元素（包括 自身）设置了 transform、will-change 或 overflow: hidden，就会干扰其绝对定位锚点，导致 Safari 中完全不可见，或 Chrome 中位置飘移。
这不是 bug，是 CSS 定位规范的连锁效应：dialog 内部使用类似 position: fixed 的机制，而这些属性会创建新的包含块（containing block），破坏原生居中逻辑。
- 检查所有祖先元素的 computed style，重点排查
transform（哪怕只是transform: translateZ(0)） - 临时移除
body { will-change: transform }类似声明，看是否恢复 - 避免给
或其直接子级设overflow: hidden—— 这会让 backdrop 被裁掉 - 不要手动加
position: absolute到dialog上，它会覆盖原生定位逻辑
如何强制居中且兼容 Safari
Chrome 默认居中，Firefox 透明无样式，Safari（v17.6 及更早）默认不居中且无视 margin: auto。靠浏览器自动居中不可靠，必须手写重置定位，但得避开破坏原生行为的写法。
关键点：不能动 dialog 的 display 或 position 类型，而是用 transform 微调，且确保 backdrop 不受影响。
- 推荐样式：
dialog { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } - 必须同时补全
dialog::backdrop样式，否则 Safari 中 backdrop 不显：dialog::backdrop { background: rgba(0, 0, 0, 0.5); } - 别加
pointer-events: none到dialog上，这会让showModal()的焦点锁定彻底失效 - 若需适配旧版 Safari（≤16.3），需 fallback 到 JS 动态计算并设置
style.top/style.left
为什么 dialog.getBoundingClientRect() 返回空值
这是最隐蔽的定位问题信号：getBoundingClientRect() 返回 { width: 0, height: 0, ... }，说明浏览器根本没给它分配布局空间——不是渲染慢，是它压根没进入 layout 流程。
90% 情况下，这意味着 dialog 当前未激活（没调用 showModal()），或 DOM 位置非法（不在 下），或被 CSS 规则（如 display: none）强制排除出渲染树。
- 先确认是否已调用
dialog.showModal()；仅设open属性不会触发布局 - 检查
dialog.parentNode === document.body是否为true - 运行
getComputedStyle(dialog).display，应为"none"（未激活）或"block"（已激活）；若为其他值（如"flex"），说明被 CSS 强制改写了 - 禁用所有自定义 CSS，只留原生标签和
showModal()调用，看是否恢复 —— 若恢复，说明是样式污染
dialog 显示出来，而是让它在 Safari 里不偏移、不消失、不漏 backdrop，同时不破坏键盘焦点流。这些都不是报错型问题，调试时得盯着 computed style 和 DOM 结构一层层往下挖。
