直接删掉父级overflow: hidden；更稳妥的是将dialog移至body直系子节点，或用createportal/teleport挂载到body下，避免其被非visible overflow容器创建的包含块裁剪。
dialog被父容器overflow: hidden裁剪怎么办
直接删掉父级的overflow: hidden。这不是样式优化问题，而是浏览器渲染机制硬性限制：overflow非visible的容器会创建新的包含块，并把dialog的::backdrop和自身定位框一起裁剪——哪怕dialog在DOM里是body直系子元素，只要它被包裹在某个overflow: hidden的父级里（比如<div class="wrapper"><dialog></dialog></div>），就会出问题。
-
overflow: clip可替代hidden（现代浏览器支持），它只裁剪内容，不创建新包含块，不影响dialog定位 - 更稳妥的做法是把
<dialog></dialog>移出所有非body直系容器，确保它在HTML中是的直接子节点 - 如果结构无法调整（如CMS模板限制），只能用JS在
showModal()前临时移除父级overflow，关闭后再恢复
为什么transform或will-change会让dialog偏移或消失
因为transform、will-change、filter等属性会触发新的层叠上下文（stacking context）和包含块，导致dialog的绝对定位基准错乱。Safari尤其敏感，可能让弹窗整个“飞”到视口外，或::backdrop完全不渲染。
- 检查父级是否写了
transform: translateZ(0)、will-change: transform或filter: blur(1px)，全部干掉 - 不要给
dialog本身设transform——它内部已由浏览器用position: fixed实现居中，加了反而冲突 - 若必须用动效，改用
animation配合opacity和scale，在dialog[open]上做，而非父容器
dialog嵌套在main/div里却报错“backdrop不出现”
这不是报错，是预期行为。规范要求dialog必须是的直接子元素，否则::backdrop的插入位置和层级计算失效。Chrome 120+ 和 Safari 17.4+ 虽能调用showModal()成功，但遮罩层逻辑阻塞（Firefox）或视觉缺失（部分Safari版本）仍会发生。
- ✅ 正确结构：
<dialog id="myDialog"></dialog> - ❌ 危险结构：
<main><dialog></dialog></main>或<div class="app"><dialog></dialog></div> - 若用框架（React/Vue），确保
dialog挂载到document.body，而不是组件内部的div——用createPortal或Teleport是唯一可靠解法
点击遮罩关闭后dialog内容被overflow截断
常见于给dialog内部容器设了overflow: hidden或max-height，而用户点击遮罩时dialog.close()触发得快，但滚动位置没重置，导致内容区域视觉卡住、文字显示不全。
- 监听
close事件，在里面手动重置内部滚动容器的scrollTop = 0 - 避免对
dialog直接设overflow，改用内部<div class="dialog-body">控制，且该<code>div需设max-height+overflow-y: auto，而非hidden - 如果内容含预格式化文本（
<pre class="brush:php;toolbar:false;"></pre>）或代码块，额外加white-space: pre-wrap防横向溢出撑破容器
真正容易被忽略的是：即使你把
dialog放对了位置、删光了所有干扰CSS，只要父级有z-index且值不够高，它仍可能被其他绝对定位元素盖住——dialog默认z-index约1000，但某些UI库或广告脚本会设到9999以上。动手前先打开DevTools看computed z-index。
