[csswg-drafts] [css-view-transitions-1] Setting `display: none` on `::view-transition` should early skip the View Transition (#13924)

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

== [css-view-transitions-1] Setting `display: none` on `::view-transition` should early skip the View Transition ==
Demo 1: https://codepen.io/bramus/pen/bNBwwwq/8466b4aceecbe0c6d2ddee520deab112

This demo right here starts a View Transition every time you click the document. However, because it has the following CSS, the View Transition immediately _clears_.

```css
::view-transition-group(*) {
 animation-duration: 0s;
}
```

This is because of [steps 3 and 4 in “7.8 Handle transition frame”](https://drafts.csswg.org/css-view-transitions-1/#handle-transition-frame):

> 3. For each element […] set hasActiveAnimations to true if […] document’s pending animation event queue has any events associated with animation.
> 4. If hasActiveAnimations is false: […] Clear view transition transition.

---

Demo 2: https://codepen.io/bramus/pen/KKGjXgR/6cdc6a50f73519d8d5e4464b7e38fd95

Now take this second demo that does the same: it starts a View Transition every time you click the document. The only difference compared to demo 1 is that this 2nd demo does not set the `animation-duration` to `0s` but, instead, does this:

```css
::view-transition {
 display: none;
}
```

What I am seeing in Chrome and Firefox _(not in Safari, I think they are doing something special already)_ is a flash of 1 frame with no content. After that 1 frame flash, “7.8 Handle transition frame” figures out that there are no active animations and clears the VT.

I believe we can prevent this extra frame flash by extending “7.8 Handle transition frame” to force `hasActiveAnimations` to `false` when the `::view-transition` overlay is hidden using `display: none`.

Something like this (emphasized part in step 3 is the change):

> 3. **If `display` of `::view-transition` computes to a value other than `none`,** for each element […] set hasActiveAnimations to true if […] document’s pending animation event queue has any events associated with animation.
> 4. If hasActiveAnimations is false: […] Clear view transition transition.
That way it can immediately clear the VT.

@vmpstr @nt1m @jakearchibald

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


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

Received on Wednesday, 13 May 2026 10:07:29 UTC