W3C home > Mailing lists > Public > www-style@w3.org > April 2012

Re: backdrop for fullscreened elements and modal dialogs/lightboxes

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Tue, 3 Apr 2012 15:24:37 -0700
Message-ID: <CAAWBYDCn8nuMwApKS=bGmYgTY0RM+kh2=Um2GPoweU-Cx43crg@mail.gmail.com>
To: robert@ocallahan.org
Cc: "Edward O'Connor" <eoconnor@apple.com>, www-style@w3.org
Hixie, Hober, Tantek and I had a meeting over lunch today about this

1. Rename "fullscreen element stack" to something more generic, like
"modal element stack".

2. Dialogs also push themselves onto the stack when shown.

3. On the spec level, we need operations to add an (element,type)
tuple to the stack, remove one from the stack, and remove all of a
certain type from the stack.

4. When a user exits fullscreen by pressing Escape or whatever, it
clears all fullscreen elements from the stack, even if they're
interleaved with other types of elements on the stack (this seems
necessary for security).

5. Change the CSS stacking contexts to add a new level between current
steps 9 and 10.  Elements in the modal element stack are painted in
that layer rather than wherever else they would be.  This implies that
stacking contexts or pseudo-stacking contexts created by their
ancestors are irrelevant and have no effect; for example, 'opacity:0'
on an ancestor won't make a fullscreened element transparent.

Within this layer, each element in the stack paints in stack order.

6. Each element in the modal element stack also generates a ::backdrop
pseudo-element.  I'm slightly unsure whether it's better for this
pseudo to be a parent of the element or a preceding sibling.

7. Change/reduce the CSS. I think we can get by with this:

:fullscreen {
 position: fixed;
 top: 0; left: 0; right: 0; bottom: 0;

:fullscreen-ancestor:root {
 overflow: hidden;

:fullscreen::backdrop {
 position: fixed;
 top: 0; left: 0; right: 0; bottom: 0;
 background: black;

dialog[modal] {
 position: center;

dialog[modal]::backdrop {
 position: fixed;
 top: 0; left: 0; right: 0; bottom: 0;

To answer the question in roc's most recent message (which I'm
replying to), this implies that dialogs inside of iframes don't escape
the iframe.  (Fullscreened elements in iframes don't escape either,
but that's because the act of fullscreening walks the document tree
and automatically fullscreens the document containers as well.)

Received on Tuesday, 3 April 2012 22:25:27 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:14 UTC