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

> The `::view-transition-old(x)` and `::view-transition-new(x)` pseudos are siblings, so you can use `z-index` to control their layering.

@bramus Thanks a lot, it works. However, at the end of the animation, there is a small flickering (tested in Brave and MS Edge). Consider for example the following, very simple code for an annoying animation across two pages (MPA).

<details>

<summary>Show code</summary>

```html
<!-- old.html -->
<html>

<head>
  <link rel="stylesheet" href="view_transition.css">
</head>

<body style="background-color: #63001F; color: white;">
  <h1>old.html</h1>
  <a href="new.html" style="color: white;">--- Go to new.html ---</a>
</body>

</html>


<!-- new.html -->
<html>

<head>
  <link rel="stylesheet" href="view_transition.css">
  <link rel="stylesheet" href="new.css">
</head>

<body style="background-color: #072C57; color: white;">
  <h1>new.html</h1>
  <a href="old.html" style="color: gray;">Go back</a>
</body>

</html>
```

```css
/* view_transition.css */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

/* new.css */
::view-transition-old(root) {
  animation: translate 1.5s linear;
  z-index: 1;
}

::view-transition-new(root) {
  animation: none;
  z-index:0;
}

@keyframes translate {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(100%);
  }
}
```

</details>

The result can be seen in this video. Unfortunately, GitHub reduces the framerate of the video to 23.98 frames/second, so you don't see the effect. Slowing down the animation speed to 10% in the Browser dev tools doesn't slow down the flickering, so I see no way to show you what is happening, you'd have to run the example on your own 😉

The flickering appears right after the animation has finished. For a very brief moment, you see the old, red page flashing up at its initial position of `translateX(0%)`, before seeing the new, blue page rendered,

https://github.com/user-attachments/assets/fc16987f-b71c-4be0-b3f3-1b745e46c4cf

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


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

Received on Tuesday, 23 September 2025 12:11:21 UTC