v153 · dispatch timing
How many frames until it runs
A transition is created the moment a style change makes one. When its transitionrun arrives depends on where in the event loop the change happened — and this page starts the same transition from five different places and counts the rendering frames in between.
Measure every trigger
| started from | frames | ms | same iteration? | why it lands there |
|---|---|---|---|---|
| Not measured yet. | ||||
"Frames" counts requestAnimationFrame callbacks between the style change and the event, with the counter installed at the moment of the change. Animation frame callbacks run after the animation events step, so a transitionrun dispatched at the first opportunity is always seen at zero — for every trigger, including one started inside an animation frame callback. A count of one means the dispatch was deferred by a whole rendering iteration.
Reading the result
Zero is the expected answer everywhere, and it takes a moment to see why. The counter starts when the transition is created. Whichever iteration ends up dispatching the event, that iteration updates animations before it runs animation frame callbacks — so the event always arrives before the counter's next tick, provided nothing defers it.
That makes one frame a meaningful reading rather than a rounding error: it means the dispatch skipped an iteration it could have used. The triggers where that happens are the ones that run inside the rendering steps — a media query change listener, a scroll handler — which is precisely the case this change corrects.