ios safari 15.4–17.6中dialog必须为body直接子元素，否则backdrop不渲染、esc失效；android webview及双核浏览器无api支持；firefox与旧chrome mobile不渲染::backdrop；需用dialog-polyfill并严格注册。
dialog在iOS Safari 15.4–17.6的渲染缺陷必须绕开
iOS Safari对dialog的支持是“半残”状态：15.4+才支持showModal()，但直到17.6仍存在硬性限制——dialog必须是的直接子元素，否则::backdrop不渲染、Esc无响应、点击空白处完全失效。这不是CSS能修的，是浏览器解析规则。
常见错误写法：<div id="app"><dialog></dialog></div>，哪怕JS调用成功，遮罩层也不存在。实测中，父级带transform或overflow: hidden会进一步导致弹窗错位或被裁剪。
可行方案只有两个：
- 静态HTML里把所有
<dialog></dialog>标签直接写在前，不包任何容器 - 动态创建时用
document.body.appendChild(dialogEl)，别插进Vue/React根节点里
Android WebView和国产双核浏览器根本没dialog API
Android WebView（尤其Chrome 80–100旧版本）、UC、QQ、360等双核浏览器，对dialog标签的处理是“静默忽略”：标签进入DOM但showModal()报TypeError: dialog.showModal is not a function，::backdrop不生成，焦点管理全失效。这不是样式问题，是API缺失。
html5shiv完全无效——它只让IE8识别标签名，不注入方法、不模拟::backdrop、不劫持Esc键。想靠@supports (display: dialog)检测？不行，它只判断语法支持，不查showModal是否存在。
运行时检测必须写成：
if (typeof HTMLDialogElement !== 'undefined' && 'showModal' in HTMLDialogElement.prototype) {
// 原生可用
} else {
// 必须降级
}
降级不能只隐藏原生dialog再show一个div——得补全焦点锁定、Esc监听、inert属性控制背景可访问性，复杂度接近重写。
Firefox for Android和旧版Chrome Mobile不渲染::backdrop
Firefox目前（2026年中）仍不渲染dialog::backdrop伪元素，只做逻辑阻塞（背景不可点、Tab不可穿透），但视觉上无遮罩层；Chrome Mobile 110以下版本也不支持::backdrop动画和透明度控制。
这意味着单靠dialog::backdrop { background: rgba(0,0,0,0.6); }在这些环境里是白写的。必须手动加一层<div class="backdrop">并同步控制显隐，或者直接用<code>dialog-polyfill统一处理——它会在不支持的环境里动态插入真实<div>作为遮罩节点。
<p>注意：不要给<code>dialog设pointer-events: none，这会让焦点锁定彻底失效，键盘用户无法操作。
polyfill注册时机错一个字就白引入
dialog-polyfill是当前唯一可靠方案，但它不是“引入就完事”。必须严格满足两个条件，缺一不可：
- 在
中引入dialog-polyfill.css（提供::backdrop样式和基础定位） - 在DOM加载后（
DOMContentLoaded事件里）对每个dialog元素单独调用dialogPolyfill.registerDialog(d)
错误写法示例：<script>document.querySelector('dialog').showModal()</script>——此时polyfill还没注册，showModal方法根本不存在。多个dialog时，漏注册任意一个都会导致该弹窗在旧环境里完全失能。
最稳妥的初始化代码：
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('dialog').forEach(d => {
if (!d.hasAttribute('data-polyfilled')) {
dialogPolyfill.registerDialog(d);
d.setAttribute('data-polyfilled', '');
}
});
});
真正容易被忽略的是：Safari中dialog.returnValue始终为空字符串（不支持传参关闭），而Firefox对autofocus支持不稳定——首次打开可能不聚焦，得用setTimeout(() => dialog.focus(), 0)兜底。
