fullscreen

fullscreen copied to clipboard

Gecko unshipped :-moz-full-screen-ancestor in Firefox 50, and recently it was reported to cause breakage on Vimeo.

In this specific case, there are three different behaviors among Gecko (before regression), Gecko (after regression), and Blink:

• In Blink, currently, window.scrollY is set to zero whenever the document goes to fullscreen, which, I believe, doesn't match what the spec says, and could be because Blink is still using the old impl of fullscreen based on position and z-index.
• In Gecko before regression, Vimeo uses a rule with :-moz-full-screen-ancestor to hide all elements outside fullscreen element, and thus the page is no longer scrollable, and window.scrollY becomes zero as well.
• In Gecko after regression, window.scrollY keeps the previous value, because neither mechanism above works now.

So I tend to think this would be a regression once other engines also fully implement the top-layer-based fullscreen, and unship :-webkit-full-screen-ancestor pseudo-class.

The question is, then, what should we do? Should we bring back the :fullscreen-ancestor pseudo-class, or just keep current situation and blame the website? Is this a valid usecase of :fullscreen-ancestor or websites shouldn't be doing that?

Have you reported this to Vimeo? Was that the only breakage, and did you revert as a consequence?

A static test case for this would be great, I could check if it'll also break with the top layer change I (still) have cooking with :-webkit-full-screen-ancestor removed. My plan was to first ship top layer before removing that, though.

Is the fullscreen element transparent, or why does it matter if ancestor elements are visible or not? The element in top layer should fill the scree regardless of the style/layout of anything outside top layer, after all.

Whether the ancestor elements are visible doesn't matter, but whether they exist matters. The page has rules like

:-moz-full-screen-ancestor>:not(:-moz-full-screen-ancestor):not(:-moz-full-screen) {
 display:none!important
}
/* as well as those with other vendor prefixes */

so when in fullscreen, if :-moz-full-screen-ancestor is valid, everything outside the fullscreen element would no longer generate any box, which means the page basically has no height, and thus scrollY becomes zero, which triggers some change inside the fullscreen element (hide some element there so that video is visible).

Ah, that's very strange, so display:none on the ancestors doesn't cause the fullscreen element itself to disappear?

The spec says "If it is an element, it and its ::backdrop pseudo-element are not rendered if its shadow-including inclusive ancestor has the display property set to none." Although, I don't know if this is necessary. The layout box is moved to the root, so it actually should be possible to show the fullscreen element anyway. Maybe it's complicated by assumptions in the engine though.

Since the Vimeo page used the moz-prefixed pseudo-class specifically, I guess that adding unprefixed variants wouldn't actually help? If the only thing that'll keep it from breaking is prefixed pseudo-classes, then that's what we'd have to spec.

We have done that on other occasions, but usually when there's more than one site involved. @karlcow, maybe you already have contacts at Vimeo you could poke for us?

That's not moz-prefixed specific, they have similar rules for all vendor prefixes as well as unprefixed :fullscreen-ancestor:

:-webkit-full-screen-ancestor>:not(:-webkit-full-screen-ancestor):not(:-webkit-full-screen) {
 display:none!important
}
:-moz-full-screen-ancestor>:not(:-moz-full-screen-ancestor):not(:-moz-full-screen) {
 display:none!important
}
:-ms-fullscreen-ancestor>:not(:-ms-fullscreen-ancestor):not(:-ms-fullscreen) {
 display:none!important
}
:fullscreen-ancestor>:not(:fullscreen-ancestor):not(:fullscreen) {
 display:none!important
}

The root doesn't have display:none, because they use :fullscreen-ancestor>:not(:fullscreen-ancestor):not(:fullscreen), which is everything outside the fullscreen tree.

The specific issue on Vimeo has been fixed long time ago, and I didn't see any new webcompat issue report. I think we can close this issue now.