Re: [csswg-drafts] [css-view-transitions] Rendering consolidation section should special-case root element (#11772)

> 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.

> https://drafts.csswg.org/css-position-4/#paint-a-stacking-context:~:text=Assert%3A%20root%20is%20a%20box%2C%20and%20generates%20a%20stacking%20context.
assert that the root element creates a stacking context already.

That I think you misread? `root` there is an argument, not the root element.

> Is that what you're missing or is there something I'm missing? :)

In Gecko for example (haven't checked webkit) the root element can create a stacking context on its own:

```html
<!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:

```html
<!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:

```html
<!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... :)

-- 
GitHub Notification of comment by emilio
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11772#issuecomment-2718904965 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 12 March 2025 19:33:24 UTC