Chrome中<dialog>元素调用requestFullscreen()无法全屏的问题咨询

这确实是Chrome目前的一个已知行为，并非规范要求的限制，更偏向于Chrome实现上的Bug。

核心原因分析 #

1. 规范层面无限制
   Fullscreen API的官方规范并没有将<dialog>元素列为禁止全屏的对象，理论上任何可渲染的元素都应该支持requestFullscreen()调用。你找不到相关规范限制的原因也正在于此——规范本身是允许这个操作的。

2. Chrome的特殊拦截
   Chrome内部对<dialog>元素的全屏请求做了额外拦截，不管你是用showModal()、show()显示对话框，还是提前移除display: none样式，都会触发这个"fullscreen error"的TypeError。这属于浏览器实现的差异，并非符合规范的行为。

3. 其他浏览器的表现差异

   • Firefox的实现更贴合规范，没有添加这个额外限制，所以可以正常让<dialog>进入全屏模式；
   • IE本身不支持原生<dialog>，你用dialog-polyfill模拟的对话框本质是普通DOM元素（比如<div>），这类元素自然不受Chrome的dialog全屏限制，所以能正常调用全屏方法。

临时解决方案 #

如果你需要在Chrome中实现类似效果，可以试试这两种方法：

• 对dialog内部容器调用全屏：把对话框的内容放到一个独立的容器里（比如<div class="dialog-inner">），然后对这个容器调用requestFullscreen()，而非直接操作<dialog>元素；
• 模拟全屏样式：如果不需要真正的Fullscreen API（比如不需要隐藏浏览器导航栏），可以给<dialog>添加全屏样式（width: 100vw; height: 100vh; top: 0; left: 0; border: none;），视觉上达到全屏效果。

后续跟进 #

这个问题已经在Chrome的Bug追踪系统中被上报，后续版本大概率会修复这个不符合规范的限制。

内容的提问来源于stack exchange，提问作者trysis