Bug 281270 – opacity animations prevented / delayed when browser is busy - works in FF and Chrome / Edge

• Status: NEW
• Component: Animations

It seems like Safari (all versions) has an issue where opacity-only animations are delayed when the browser is otherwise busy. It was my understanding that as long as the only thing being animated involves an opacity change, the browser shouldn't require repaints to animate properly and logic that is otherwise running and blocking repaints should not cause issues.

I added the following codepen to show an example of the issue:
https://codepen.io/turjmner8/pen/RwXoOXL

If you load the page, and click the 'Start' button to run the JS code, an animation class is applied to some 'loading' bars. On the next tick, some intense browser updates begin to keep the browser busy for a few seconds (5000 table rows containing 20 cells each are added, and then the width of the table triggers repeated reflows and calculations).

In Safari, the opacity animations will not start while the browser is busy, while in other major browsers (Chrome, Firefox, Edge, etc...) there is no delay and the animations occur immediately even though the browser is still busy in the background with other calculations.

[Karl Dubost]

Confirmed. Tested on 

Safari Technology Preview  205           20621.1.2.111.4
Firefox Nightly            133.0a1       13324.10.7
Google Chrome Canary       131.0.6768.0  6768.0

On STP, the animation doesn't start immediately.

[Radar WebKit Bug Importer]

<rdar://problem/138158096>