fullscreen icon indicating copy to clipboard operation
fullscreen copied to clipboard

Document fullscreening vs. modal dialog

Open xiaochengh opened this issue 2 years ago • 7 comments

(Originally filed as a Chrome bug)

What should happen if we:

  1. Show a modal dialog
  2. Run document.documentElement.requestFullscreen() (by e.g. clicking a button in the dialog)

Live test case: https://fullscreen-demo.viggers.net/

If I read the spec correctly, this should bring the documentElement into the top layer, which is then rendered over the modal dialog. And since the rest of the page is currently inert, the page is unusable until we exit fullscreen.

This is the current behavior observed in Chrome, which doesn't seem to be a desirable behavior however. It means we can't fullscreen the page when a modal dialog is open.

Firefox simply fullscreens the page while keeping the modal dialog at the front.


Proposal: Can we make it a special case when running requestFullscreen() on documentElement, so that it simply fullscreens the page without interacting with the top layer? I suppose its main purpose is to fullscreen the entire document, and we don't want anything that's already top-layer to be covered.

Also as a side note, if we call document.body.requestFullscreen(), all browsers move the document body to the top layer and cover the modal dialog. So this really is just a special case with documentElement, and we don't need to worry about any other DOM ancestor of the dialog.

xiaochengh avatar Jul 13 '23 22:07 xiaochengh

Why isn't it desirable for the root element, but acceptable for other ancestors, such as the body element? I think I'd rather not add a special case and if people want an API for fullscreening a document we'd add a dedicated one.

cc @nt1m @emilio

annevk avatar Jul 23 '23 14:07 annevk

Safari's behavior matches Chrome per spec fwiw. Only Firefox special cases the root.

I don't feel super strongly either way.

A special case would only work for the root fwiw, since anything else in the document pushed in the top layer can potentially be overlaid by other things in the document. That is not the case for the root however, since it contains all the elements in the page.

nt1m avatar Jul 23 '23 15:07 nt1m

The Chrome team say they're waiting on consensus in this thread before they proceed.

As a web application developer using the dialog element and the fullscreen API together in production, it would be nice to have consistent behavior across browsers sooner rather than later, which means the standard needs to be clear.

I feel like the current Firefox behavior, special-casing documentElement makes more sense from a web developer point of view, but that's just my opinion - I don't mind either way as long it's consistent across browsers.

Cheers, Zade

zadeviggers avatar Sep 16 '23 07:09 zadeviggers

Not a strong opinion, but I'm leaning not to add a new API if its only use case is to fullscreen the full page while something is already in the top layer.

xiaochengh avatar Sep 18 '23 21:09 xiaochengh

How is the special case implemented in Firefox? Is it to skip step 4 of https://fullscreen.spec.whatwg.org/#fullscreen-an-element?

foolip avatar Nov 30 '23 08:11 foolip

I think the special-case is just here

emilio avatar Nov 30 '23 12:11 emilio