demo · v140

No-flicker Cleanup

The chromestatus motivation: code that runs from vt.finished.then() used to execute after the visual frame that removes the transition — any style fixup in the resolver was painted a frame too late, producing a one-frame flicker. Chrome 140 moves the resolution to fire asynchronously after the lifecycle, so the cleanup paint matches.

A

pre-140 timeline

1. transition runs
2. visual frame removes the VT
3. finished resolves
4. your .then() runs — style fixup applied
→ next frame: visible flicker

Chrome 140 timeline

1. transition runs
2. finished resolves async after lifecycle
3. .then() runs while VT structure is still up
→ next frame: clean cleanup, no flicker

Click "Run transition" to see the timing.

const vt = document.startViewTransition(() => updateDom());

// Chrome 140+ this resolves before the next compositor frame,
// so any style fixup applied inside .then() is included in that frame.
vt.finished.then(() => {
  card.style.background = "var(--accent-emerald)";   // no flicker
});

see also