[csswg-drafts] [css-view-transitions-1] finished promise timing (#12442)

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

== [css-view-transitions-1] finished promise timing ==
In [css-view-transitions-1's Handle Transition Frame](https://www.w3.org/TR/css-view-transitions-1/#handle-transition-frame-algorithm), step 4 says

> 1. Set transition’s [phase](https://www.w3.org/TR/css-view-transitions-1/#viewtransition-phase) to "done".
> 2. [Clear view transition](https://www.w3.org/TR/css-view-transitions-1/#clear-view-transition) transition.
> 3. [Resolve](https://webidl.spec.whatwg.org/#resolve) transition’s [finished promise](https://www.w3.org/TR/css-view-transitions-1/#viewtransition-finished-promise).
> 4. Return.

Since we resolve the promise in 3, the earliest opportunity for script to run is at the next microtask checkpoint. However, these steps are executed via [perform pending transition operations](https://www.w3.org/TR/css-view-transitions-1/#ref-for-handle-transition-frame) which is invoked in the [Update the Rendering loop](https://html.spec.whatwg.org/#event-loop-processing-model:perform-pending-transition-operations), which doesn't have a microtask checkpoint before producing a visual frame.

This means that we are guaranteed to present one visual frame _after_ view transition is ended but _before_ script had a chance to run.

In some situations, this causes a flicker if we're transferring some style from the group pseudo to the final destination element. Here's an example where the box shadow is applied to the group pseudo and transferred to the final element when the transition finishes: https://vmpstr.github.io/htmldemos/vt/flicker.html (you might have to click a few times, but the flicker is definitely there in both Chrome and Safari). The workaround toggle listens to the first Animation object's finish promise (which resolves and runs outside of the rendering loop) to do the same work, and the flicker disappears.

My proposal to avoid this flicker is to move step 4 of Handle Transition Frame to run after the Update the Rendering step. Something along the lines of marking the transition as "pending done", and scheduling a task to finalize the transition. Finalizing the transition would then confirm that the state is "pending done", and run the four steps of current step 4 of Handle Transition Frame

/cc @nt1m @emilio @noamr 


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


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

Received on Thursday, 3 July 2025 14:22:40 UTC