Re: [csswg-drafts] [css-transitions-1] Clarify timing of transitionrun and transitionstart (#11665)

> If you load https://flackr.github.io/web-demos/css-transitions/event-timing.html and click the test button you can see the precise ordering of events when a transition is triggered.
> 
> Interop difference, Safari notably fires transitionrun, transitionstart before the next requestAnimationFrame, where Chrome and Firefox don't fire these events until the following frame.

I might be misunderstanding the test, but if you force a style flush, Firefox also dispatches transitionrun before the next animation frame:

![Image](https://github.com/user-attachments/assets/95ff555a-5106-481a-b13b-982e683df0e3)

I think the more precise definition of transition events is in [level 2](https://drafts.csswg.org/css-transitions-2/#transition-events) but it could probably be clarified that that if the transition did not exist in the previous frame it should be treated as "idle" for the previous frame (or simply update the chart to say "idle or non-existent").

> +1 to this suggestion. `transitionrun` not firing immediately _(in Chrome and Firefox at least)_ is currently an issue when building a [custom style observer](https://brm.us/style-observer) to respond to style changes: it fires a frame too late, potentially causing glitches [as explained here](https://www.bram.us/2024/11/25/experiment-automatically-triggered-view-transitions-with-mutationobserver/#shortcomings).

I think transition events are a bit of a blunt instrument for observing animation state. For example, there's no event when the user updates an animation's duration. Internally Firefox has an animation observer interface which is used by DevTools. I wonder if it might be useful to standardise something like that in future as I've wanted it a few times and it's come up in a number of other issues too, from memory.

-- 
GitHub Notification of comment by birtles
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11665#issuecomment-2644431032 using your GitHub account


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

Received on Saturday, 8 February 2025 02:09:46 UTC