Bug 312407
| Summary: | CSS linear() easing curve forces animations onto the main thread | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Nick Coury <ncoury> |
| Component: | Animations | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED DUPLICATE | ||
| Severity: | Normal | CC: | graouts |
| Priority: | P2 | ||
| Version: | Safari 26 | ||
| Hardware: | All | ||
| OS: | iOS 26 | ||
| URL: | https://loading-text-jank-ncourygoogle.yoyo.codes | ||
Nick Coury
Reproduction at https://loading-text-jank-ncourygoogle.yoyo.codes
Reproduces on iOS Safari and Desktop Safari 26.
Description
When working with CSS `linear()` easing curves (we are using them for spring physics), we found our animations are dropping a significant number of frames and janking severely, despite only utilizing transform and opacity to keep them on the compositor. We narrowed this down to the use of https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/easing-function/linear and if we use other easing curves the animation is properly run off the main thread.
Digging for more details I noticed there's a history around this already:
https://bugs.webkit.org/show_bug.cgi?id=240061 - Original implementation supported accelerated animations but contained bugs
https://bugs.webkit.org/show_bug.cgi?id=260136 - Removed accelerated animation support for correctness
https://bugs.webkit.org/show_bug.cgi?id=281429 - Marked as WAI in the short term until 250970 is resolved
https://bugs.webkit.org/show_bug.cgi?id=250970 - Resolved, moving accelerated animations to another thread
https://bugs.webkit.org/show_bug.cgi?id=307776 - Open bug identifying animations to run 60Hz+
Does this indicate there's a reasonable path to accelerating linear() curves again? Getting high polish spring physics is difficult on web without linear() + accelerated animations off the main thread at high refresh rates.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Antoine Quint
This is true of the released Safari so far. However, once the "Time-based Threaded Animations" feature flag is enabled, this will won't be the case anymore. You can already try this in Safari Technology Preview where this flag is enabled by default. I can't however comment on when this will make it to a Safari release.
Antoine Quint
Duping to bug 312015 where we enabled the relevant flag by default on all Cocoa ports.
*** This bug has been marked as a duplicate of bug 312015 ***
Antoine Quint
Note also that we shipped support for this for scroll-driven animations in macOS 26.4 and iOS 26.4.
Nick Coury
Incredible! Just verified it works on STP. Look forward to it rolling out.
And yes, we saw the 26.4 support and had actually been holding off on more aggressive use of scroll-driven animations until now. We're actively building out new animations on it and looking forward to the results. Thank you for all the help!