Intent to Implement and Ship: Fullscreen API's top layer
Matt Falkenhagen
Contact emails
Spec
Fullscreen API http://fullscreen.spec.whatwg.org/#new-stacking-layer
Summary
A new stacking layer for always-on-top elements. Top layer is actually already implemented but only used by <dialog>. This intent to ship is for migrating the Fullscreen API to use top layer.
Motivation
Some elements, like Fullscreen elements and modal <dialog>, want to be on top of everything else. The top layer gives well-defined stacking and positioning behavior for such elements.
Currently Blink's Fullscreen implementation works by wrapping the fullscreen element in an anonymous flexbox with a large z-index and solid black background. This is kind of a hack and has been buggy in practice.
Compatibility Risk
Blink already ships the Fullscreen API, which enables arbitrary elements to go fullscreen. Top layer will change the positioning and sizing of fullscreen elements. Instead of being centered on screen with its original dimensions, the fullscreen element will be absolutely positioned with default height/width of 100%. The position and size can be customized using normal CSS.
The top layer also introduces a new ::backdrop pseudo-element, which can be used to create a backdrop that hides or dims the underlying document.
Firefox's current Fullscreen implementation is closer to the latest spec, but stretching the element to width/height 100% is forced rather than just the default. They have a bug for updating to the latest spec and have commented positively about it: https://bugzilla.mozilla.org/show_bug.cgi?id=746437
IE11 Preview has Fullscreen API support, and the positioning/sizing looks like it matches the spec. But ::backdrop is not implemented.
Safari: Currently WebKit and Blink fullscreen behaves the same. In WebKit also, <dialog> uses top layer (all behind a feature flag) and Apple developers seemed positive about using top layer for Fullscreen https://bugs.webkit.org/show_bug.cgi?id=84796
The long-term plan is for the top layer definition to move from the Fullscreen spec to CSS. There is a risk of some spec change when that happens, but I don't expect a major change.
Ongoing technical constraints
None
Will this feature be supported on all five Blink platforms (Windows, Mac, Linux, Chrome OS and Android)?
Yes
OWP launch tracking bug?
None. There is a normal bug at https://code.google.com/p/chromium/issues/detail?id=240576
Row on feature dashboard?
No. There is a row for "Fullscreen API" which this may fit under.
Requesting approval to ship?
Yes
Elliott Sprehn
Kenneth Rohde Christiansen
most browser will be shipping this then, I am sure that change won't
be major.
Kenneth Rohde Christiansen
Senior Engineer, WebKit, Qt, EFL
Phone +45 4294 9458 / E-mail kenneth at webkit.org
﹆﹆﹆
PhistucK
IE11 Preview has Fullscreen API support, and the positioning/sizing looks like it matches the spec. But ::backdrop is not implemented.
