[css-view-transitions] Rendering consolidation section should special-case root element #11772
Comments
|
https://www.w3.org/TR/CSS2/visuren.html#x43:~:text=The%20root%20element%20forms,%27%20%5BCSS3COLOR%5D. |
|
That is not "the root element box" tho. There is a root stacking context, but it's not generated by the actual root element box.
That I think you misread?
In Gecko for example (haven't checked webkit) the root element can create a stacking context on its own: <!doctype html>
<style>
:root {
isolation: isolate;
background-color: red;
}
div {
position: fixed;
width: 100px;
height: 100px;
background-color: green;
mix-blend-mode: exclusion;
}
</style>
<div></div>It seems Blink will not isolate the root box in that case. But you can do fairly wild stuff with that box like making it absolutely-positioned or something, so I'd expect this: <!doctype html>
<style>
:root {
position: absolute;
isolation: isolate;
width: 50px;
height: 50px;
background-color: red;
border: 50px solid blue;
}
div {
position: fixed;
width: 100px;
height: 100px;
background-color: green;
mix-blend-mode: exclusion;
}
</style>
<div></div>To behave similar to this: <!doctype html>
<style>
:root {
background-color: red;
}
.root {
position: absolute;
isolation: isolate;
width: 50px;
height: 50px;
border: 50px solid blue;
}
div {
position: fixed;
width: 100px;
height: 100px;
background-color: green;
mix-blend-mode: exclusion;
}
</style>
<div class="root">
<div></div>
</div>Yet neither Blink or Gecko do that. https://drafts.fxtf.org/compositing-1/#pagebackdrop doesn't seem to say if the inner root box is able to create a stacking context or not, though it says that a lot of the compositing effects specified on the root element get propagated to the root group... Anyways I think at least some clarification here is in order, even if not view-transition specific in the end... :) |
|
Look at: https://drafts.csswg.org/css-position-4/#paint-a-document It calls "paint a stacking context" with the root element, which then asserts that it's a stacking context. |
|
Yes, but my point is that there are two boxes involved, not one. Nobody is debating that the outer / viewport / root box is a stacking context. Whether the "inner" box (the abspos in my example above) is / should be a stacking context is the question. |
OK. As you said, not sure if this is a view transitions issue. |
|
Also see #8353 |
Which example are you referring to? Is the Blink forces the document element (aka the LMK if I'm still not understanding what you are saying, I think I might be.. |
|
This issue/comment from Oriol indicates that Blink and Webkit always make the root element a stacking context, but Firefox does not. Can Firefox just change its behavior? Given the current Firefox behavior is apparently compatible with websites, I would think that changing it will also be compatible. |
|
I think it's a bit more complicated. At least when I did that there were a bunch of test issues related to blending and what not. I'll look into it and report back (I fixed some of these compositing of the root group issues for view transitions). |
https://drafts.csswg.org/css-view-transitions-1/#named-and-transitioning has:
Interpreted literally, it means that the root element box would become a stacking context always (via
:root { view-transition-name: root }in the UA sheet). That seems unintended and doesn't match implementations.My understanding is that the root element is "special" and gets propagated to the whole snapshot-containing-block rect / doesn't need its own stacking context.
The spec should reflect that, unless I'm missing something?
cc @chrishtr @noamr @nt1m @vmpstr
The text was updated successfully, but these errors were encountered: