Unable to put <dialog> element into fullscreen mode

Question

I can't seem to put a element into fullscreen mode on Google Chrome with requestFullscreen(). I get a TypeError of "fullscreen error", which isn't all that helpful. This happens whether I use showModal or show, or neither. I usually give the modal display: none until it is opened, but I also tried without this style.

Other browsers allow the fullscreening. This includes at least Firefox, which supports modal.show but not modal.showModal, and Internet Explorer, which doesn't support dialog elements. The npm package dialog-polyfill, which I have been using, adds partial <dialog> support on these browsers, but doesn't affect which browsers allow or deny the fullscreening behavior.

Is the error part of the spec? I haven't been able to find too much info on the error, and both specs seem to allow the behavior, though I admit I'm not too proficient with reading browser specs. Are the other browsers allowing the fullscreening because they haven't fully implemented the dialog feature, or is this a bug in Chrome?

Answer 1

On reading the spec a bit more, I found out that the element isn't supposed to support fullscreen mode. The spec specifically states:

The requestFullscreen(options) method, when invoked, must run these steps:

6. If any of the following conditions are false, then set error to true:

   • pending’s namespace is the HTML namespace or pending is an SVG svg or MathML math element. [SVG] [MATHML]

   • pending is not a dialog element.

   • The fullscreen element ready check for pending returns true.

   • Fullscreen is supported.

   • This algorithm is allowed to request fullscreen.

If anyone can provide more information on why this restriction exists, I would be very interested. It doesn't seem like a reasonable restriction, as the dialog element seems tailor-made to work well with fullscreen, as a way to isolate the dialog from the page even more.