Description
In css-view-transitions-1's Handle Transition Frame, step 4 says
- Set transition’s phase to "done".
- Clear view transition transition.
- Resolve transition’s finished promise.
- 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 which is invoked in the Update the Rendering loop, 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", resolving the finished promise, and scheduling a task to finalize the transition. Finalizing the transition would then confirm that the state is "pending done", and run the rest of the steps of current step 4 of Handle Transition Frame