Bug 281429 – Using linear() CSS and WAAPI animations/transitions are capped at 30fps or 60fps

• Status: RESOLVED
• Resolution: DUPLICATE
• Component: Animations

[Bruno Stasse]

Created attachment 472932 [details]
testcase

It seems CSS transitions and animations, as well as WAAPI animations, making use of the CSS `linear()` easing function are capped at 30fps in low-power mode, and at 60 fps on devices with a refresh rate of 120hz (e.g. iPhone Pros and iPad Pros).

It is expected that such animations always run at the maximum refresh rate, and making use of the `linear()` function should not be an exception to this, especially since this function was introduced precisely to be able to produce high-performance animations following a spring or bounce curve, as an improvement over JavaScript animations making use of `requestAnimationFrame`.

Note that this limitation seems very similar to the one imposed on `requestAnimationFrame` (see https://bugs.webkit.org/show_bug.cgi?id=173434), but doesn't seem justified in this case.

This has been tested on iOS and iPadOS 18. It may also affect macOS.

Steps to reproduce 30fps capping (on all iOS and iPadOS devices, possibly macOS as well):
- Activate low-power mode
- Open the testcase in Safari
- Tap anywhere on the screen
- Observe that the square animated using the `linear()` easing curve moves at a low refresh rate

Steps to reproduce 60fps capping (on a 120hz-screen-equiped Apple devices):
- Same steps, but don't activate low-power mode

[Bruno Stasse]

Created attachment 472933 [details]
testcase-video

Video for the low-power mode case (capped at 30fps).

[Antoine Quint]

This is as designed. We cannot make use of accelerated animations when a `linear()` timing function is used. We're hoping to life this restriction with bug 250970.

*** This bug has been marked as a duplicate of bug 250970 ***