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.

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

This is because of steps 3 and 4 in “7.8 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:

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