Re: [csswg-drafts] [css-view-transitions-1] Named elements appear above fixed elements when transitioning (#8941)

Unfortunately, this is the API working as intended. View Transition has to figure out how to animate multiple aspects of the DOM changing. One of those is the paint order which can't be interpolated so we had to pick some paint order. And the way it works is:

- First paint all the view-transition-names in the old DOM, in the order in which they are painted in the old DOM.
- Then paint all the view-transition-names which are only in the new DOM, in the order in which they are painted in the new DOM.

The paint order here derives from the DOM order of `::view-transition-group` pseudo-elements.

In this case `box` is only in the new DOM (we ignore elements with a view-transition-name if they are display: none), so it paints on top of all view-transition-names from the old DOM which includes the footer. The fix is simple, you can use z-index to define the paint order of the group pseudos:

```css
::view-transition-group(footer) {
  z-index: 100;
}
```

One approach we could try would be something like :

- Figure out the paint order of elements in the old DOM. Say its [A, B, C].
- Figure out the paint order of elements in the new DOM. Say its [A, D, B, C].

Then combine these in the best way possible. For example, in the above case [A, D, B, C] would make sense. But if the 2 lists are [A, B, C] and [A, D] then its not clear what the ordering should be. Current spec would do [A, B, C, D] which seems fine, authors can always use z-index to fix the paint order.

I'm open to suggestion here, not sure if the pattern in this issue is common enough for us to change the way we order the pseudos vs chalking it up to an edge case where authors should use z-index.

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


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

Received on Wednesday, 14 June 2023 18:17:36 UTC