<dialog>大图预览需避免直接设open属性，应JS调用showModal()并手动处理滚动锁定、焦点控制、加载失败降级及旧浏览器兼容。
用 <dialog> 实现大图预览是现代浏览器下最轻量、语义最清晰的方案，但直接写 open 属性或忽略焦点/滚动控制，会导致 Safari 卡死、键盘用户无法操作、背景页仍可滚动等实际问题。
为什么不能直接写 open 属性再调用 showModal()
浏览器对 <dialog> 的初始化行为不一致：Safari 15.4–16.3 会拒绝在 open 为 true 的状态下调用 showModal()，直接抛出 InvalidStateError。Chrome 和 Firefox 虽容忍，但逻辑混乱——open 是只读属性，手动设为 true 后再调用 showModal()，可能触发两次渲染或焦点错乱。
- 正确做法：DOM 中保持
<dialog>无open属性，JS 中首次调用前确保dialog.open === false - 必须显式调用
dialog.showModal()，不能靠 CSS 或属性切换 - 若需预加载（如幻灯片预加载下一张），用
new Image().src = url，而非提前往<img>写src
showModal() 后必须手动接管 body 滚动和焦点
原生 <dialog> 不会自动锁住背景滚动，尤其在 macOS Safari 和 iOS 上，用户一滚动就跳出预览；也不保证键盘焦点落在可交互元素上，导致 Tab 键失效。
- 打开时执行：
document.body.style.overflow = 'hidden'（关闭时还原为''） - 紧接着调用
dialogEl.focus()，否则焦点留在触发按钮外，ESC 键无效 - 焦点目标优先级：关闭按钮 > 大图本身 > 切换箭头（按 Tab 顺序排列）
- 不要依赖
autofocus属性——<dialog>中它不可靠，且部分旧 Safari 忽略
图片加载失败必须有 fallback 提示和复制能力
大图 src 加载失败时，<img> 只显示破碎图标，用户无法判断是网络问题、路径错误还是跨域限制。更糟的是，很多实现连 onerror 都没监听。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 给预览
<img>绑定onerror，插入<p>图片加载失败</p>和一个<button> - 按钮
onclick执行navigator.clipboard.writeText(largeSrc)，方便用户手动排查 - 避免用
background-image：它无法监听onerror，也不能用object-fit控制缩放，更不支持自然尺寸计算 - 禁用
loading="lazy"：预览图是用户主动触发，应立即加载，懒加载反而造成空白等待
兼容 Safari 15.4 以下必须运行时检测并降级
@supports (display: dialog) 只能判断语法支持，不能反映 showModal() 是否可用。iOS Safari 15.x 和部分 Android WebView 对 <dialog> 的 backdrop 和焦点管理支持不全，强行使用会导致遮罩不可见、ESC 无效、点击无响应。
- 检测写法必须是：
typeof HTMLDialogElement !== 'undefined' && 'showModal' in HTMLDialogElement.prototype - 不支持时，降级用
<div role="dialog" aria-modal="true">，并手动绑定keydown（Esc）、click（遮罩区域判断）、focusin（焦点陷阱） - 别只隐藏原生
<dialog>再 show 一个 div——那等于放弃所有原生模态保障，得重写整套逻辑 - 如果项目明确要支持 iOS 15 或更低版本，建议直接引入
dialog-polyfill，比手写降级更稳
真正难的不是让图弹出来，而是让用户点开后能关掉、能看清、能操作、能退回去——这些细节藏在 showModal() 调用之后的三行 JS 里，漏掉任何一行，体验就断了。
