iOS Safari 中 dialog 元素默认不工作，需检测 HTMLDialogElement 存在性并降级；16.4+ 才稳定支持 showModal()，但 backdrop、焦点、表单等行为仍需手动补全逻辑。
dialog 元素在 iOS Safari 上默认不工作
直接写 <dialog></dialog> 并调用 showModal()，在 iOS 15.4 之前（含）的 Safari 中会静默失败，既不弹出也不报错。这不是你代码写错了，是 WebKit 长期未实现该 API 的完整支持。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须检测
window.HTMLDialogElement是否存在，不存在则降级为<div role="dialog">+ 手动控制显示/焦点/遮罩 - iOS 16.4+ 才开始稳定支持
showModal()，但仍有部分行为差异（比如 backdrop 点击关闭需显式监听click事件并调用close()） - 不要依赖
open属性初始化状态——iOS 旧版会忽略它，应统一用 JS 控制生命周期
backdrop 样式在移动端容易失效或错位
原生 <dialog> 渲染时会自动插入一个 ::backdrop 伪元素，但它的定位逻辑在 viewport 缩放、软键盘弹出、横竖屏切换等场景下极易偏移，尤其在微信内置浏览器或 QQ 浏览器中常见半透明遮罩只盖住顶部一半的问题。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 显式重置
dialog::backdrop的position: fixed和inset: 0，避免被父容器 transform 或 overflow 影响 - 添加
backdrop-filter: blur(4px)时，务必配合-webkit-backdrop-filter，否则 iOS Safari 16+ 仍不生效 - 若发现 backdrop 点击无响应，检查是否被
input或textarea聚焦后唤起的软键盘遮挡——此时需监听focusin事件临时提升 dialog z-index
移动端 focus 管理和键盘交互不符合直觉
原生 <dialog> 声称“模态”，但实际不会自动将焦点限制在内部，用户仍可 tab 到背景内容；且点击 backdrop 默认不关闭（Chrome 某些版本除外），iOS 更是完全不响应。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 手动实现焦点陷阱：监听
keydown，拦截 Tab 键并在首尾元素间循环；打开 dialog 后立即element.focus()到第一个可交互子元素 - 关闭逻辑必须显式绑定：
dialog.addEventListener('click', e => e.target === dialog && dialog.close())，不能只靠 backdrop 点击 - 表单提交后调用
dialog.close()，但注意 Safari 中若 dialog 内有<form>且未阻止默认提交，会触发页面刷新
与 Vue/React 等框架配合时容易出现渲染时机问题
在组件挂载后立刻调用 dialog.showModal()，可能因框架的异步 DOM 更新导致元素尚未真实插入文档，抛出 DOMException: The element is not in a Document 错误。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- Vue 用户用
nextTick包裹调用；React 用户用useEffect的第二参数空数组 +setTimeout(..., 0)或requestAnimationFrame - 避免在 SSR 环境中直接渲染
<dialog>，服务端没有HTMLDialogElement，会导致 hydration 不一致 - 若使用 Portal 渲染（如 React 的
createPortal），确保 portal 容器已挂载到document.body，否则 backdrop 可能无法覆盖全屏
dialog 在移动端不是“开箱即用”的方案，它的兼容性断层、焦点行为松散、以及 backdrop 渲染不可控，都要求你亲手补足大量逻辑——这些恰恰是多数 demo 文章里刻意跳过的部分。 
