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

danchristofi has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-view-transitions-1] Named elements appear above fixed elements when transitioning ==
Please see the following codepen: https://codepen.io/danchristofi/pen/abQzMLM

```
<button id="show">Show box</button>
<div id="box"></div>
<footer class="footer"></footer>
```

```
#box {
  width: 300px;
  height: 2000px;
  background: #000;
  display: none;
  view-transition-name: box;
}

.footer {
  position: fixed;
  width: 100%;
  height: 100px;
  background: red;
  bottom: 0;
  left: 0;
  z-index: 100;
  view-transition-name: footer;
}

.visible {
  display: block !important;
}

::view-transition-old(box),
::view-transition-new(box) {
  animation-duration: 10s;
}
```


```
document.getElementById("show").addEventListener("click", () => {
  document.startViewTransition(() => {
    document.getElementById("box").classList.toggle('visible')
  })
})
```



When adding a class to make the box visible, it appears over the top the fixed element. In this example the red bar is fixed to the bottom of the page with the box behind it. After the animation is finished the box returns behind the footer.
<img width="371" alt="image" src="https://github.com/w3c/csswg-drafts/assets/35808414/8b747c49-0f9e-489c-8a13-d9f3b28f9835">

Removing the view-transition-name from the box stops this happening, but it would be needed if you want a custom animation.

Is this a bug or is there any extra styling needed to get the to work correctly?

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8941 using your GitHub account


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

Received on Friday, 9 June 2023 16:14:47 UTC