How does top layer interact with CSS isolation?

[foolip]

In https://crbug.com/673976 it was reported that the isolation property isn't reset by Fullscreen in Chromium, with https://jsfiddle.net/2qvw0asr/2/ demonstrating the problem.

As https://drafts.fxtf.org/compositing-1/#isolation talks about stacking contexts does too https://fullscreen.spec.whatwg.org/#new-stacking-layer it's not obvious how they interact. Is an UA style sheet override needed, and should the computed style for isolation change?

Note that Chromium does not yet implement Fullscreen in terms of top layer, so it's possible that this is a non-issue spec side.

@upsuper

[upsuper]

It seems to me isolation makes the element create a stacking context, and top layer also makes element create a stacking context, so the element create a stacking context, there is nothing wrong. The isolation would just be useless here, because top layer already makes the element create a stacking context.

An element wouldn't have multiple stacking context (actually having multiple stacking contexts doesn't make anything different for a single element, since stacking context only affects how its descendent would be placed relative to each other in z-order).

The problem for Chromium here is that, later <div>s have higher rendering position (closer to the eyes) if they create stacking context and have equal z-index (which is auto by default), since they are in the same parent stacking context.

Previously, UAs use z-index: 2147483647 to workaround this issue, but this isn't perfect. The spec should have addressed this issue via stating that "it is rendered as an atomic unit as if it were a sibling of its root". But thinking a bit further, I think there is still some issue with the spec.

I think the idea is that, the top layer should be rendered on top of the whole page, and nothing can cover top layer elements except another top layer element. But it seems to me the current spec still allows something in the root stacking context with a positive z-index to be rendered over top layer, which seems wrong to me.

I guess it should be a slibing to the root stacking context, rather than a child... We probably need a CSS expert here to get things right...

(I'm quite sleepy at the moment and gonna sleep soon, so I could be wrong...)

[annevk]

The problem is indeed that whatever defines the CSS rendering tree needs to also define top layers. Having Fullscreen monkey patch CSS is not a good solution. Unfortunately, I believe nobody in the CSS WG is working on that. @tabatkins @fantasai?

[tabatkins]

Right, this should be part of the Position spec, but MS dropped it and I haven't had the opportunity to really work on it.

What needs to happen, roughly, is that things put into the top layer need to be reparented in the box tree to be children of the root layer (not root element), or something like that, to get the right stacking/filtering/containing behavior. Then they just render in the top layer, which is "above" all normal content.

[fooloomanzoo]

By specs:

For CSS, setting isolation to isolate will turn the element into a stacking context.
w3.org/TR/compositing-1/#isolation

You could make fullscreen itself be that context, instead of giving it just a fixed position-property.