How should UAs hide root element scrollbars?

[nt1m]

What is the issue with the Fullscreen API Standard?

All existing UAs currently hide the root element scrollbars when fullscreen, but they all do so in different ways:

• Chrome & Firefox I believe have special logic that prevents scrolling + hides scrollbars
• Safari has an overflow: hidden !important UA rule on *|*:root:-webkit-full-screen-document:not(:fullscreen)

I wonder if we can get a standardized way of doing this. Something like:

*|*:root:has(:fullscreen) {
    overflow: hidden | clip !important;
}

(UAs may not necessarily want to use :has() for performance reasons, but the idea would be something like Safari implements).

Also, not sure if clip or hidden is closer to the wanted behavior here, but I think I'd be OK with either.

cc @whatwg/css

[nt1m]

cc @upsuper

[nt1m]

I found some context around Gecko in https://bugzilla.mozilla.org/show_bug.cgi?id=1201798

[nt1m]

Seems Gecko chose custom code to avoid frame reconstruction when going fullscreen? In which case overflow: clip (which wasn't implemented at the time Gecko made the change) might be a better choice?

[upsuper]

All existing UAs currently hide scrollbars when fullscreen

... and the fullscreen element is not the root element, which is correctly reflected in your standardized UA style, though :)

We used custom code in Gecko both to avoid frame reconstruction and to remove :-moz-full-screen-ancestor which was a removed part of the standard.

It seems that Gecko style code has got finer-grained update over overflow changes, so the first reason may not apply anymore.

I guess a standardized way using :has is probably okay, and client can continue to use their custom code to do the override as long as it has the same effect.

[nt1m]

Is this behavior currently overridable by websites in Gecko? Just wondering whether !important is appropriate here in the UA style.

[upsuper]

Is this behavior currently overridable by websites in Gecko? Just wondering whether !important is appropriate here in the UA style.

I don't think it's overridable by websites in Gecko, and conceptually I don't think it should be either, so I'd say !important is appropriate and it should help simplify simulating the behavior with custom code.

[foolip]

I think the code that makes this work in Chromium is this:

:root:-webkit-full-screen-ancestor {
  overflow: hidden !important;
}

:-webkit-full-screen-document was used previously, but changed in https://codereview.chromium.org/807473002.

Specifying this with :has() sounds reasonable, but I'm wondering why it shouldn't just be overflow: hidden !important? Would changing it to overflow: hidden | clip !important be observable in any way?

[nt1m]

overflow: hidden !important works for me.