Bug 281270
| Summary: | opacity animations prevented / delayed when browser is busy - works in FF and Chrome / Edge | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | jmturner8 |
| Component: | Animations | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Major | CC: | graouts, karlcow, webkit-bug-importer |
| Priority: | P2 | Keywords: | BrowserCompat, InRadar |
| Version: | Safari 18 | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
| URL: | https://codepen.io/turjmner8/pen/RwXoOXL | ||
jmturner8
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.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
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>