Bug 257862 - accelerated animations not running at 120fps on pro motion devices
Summary: accelerated animations not running at 120fps on pro motion devices
Status: RESOLVED DUPLICATE of bug 267541
Alias: None
Product: WebKit
Classification: Unclassified
Component: Animations (show other bugs)
Version: Safari 16
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
Keywords: InRadar
Depends on:
Reported: 2023-06-08 13:13 PDT by Liam DeBeasi
Modified: 2024-01-30 06:46 PST (History)
6 users (show)

See Also:

Code reproduction (3.00 KB, text/html)
2023-06-08 13:13 PDT, Liam DeBeasi
no flags Details
Code reproduction with explicit values (3.40 KB, text/html)
2023-06-13 06:10 PDT, Liam DeBeasi
no flags Details
Code reproduction with CSS Animations (1.88 KB, text/html)
2023-06-29 14:36 PDT, Liam DeBeasi
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Liam DeBeasi 2023-06-08 13:13:31 PDT
Created attachment 466640 [details]
Code reproduction

Accelerated animations are not running at 120fps on Pro Motion iOS devices.

Steps to reproduce:

1. Open code reproduction on a Pro Motion iOS device.
2. Tap "Open Overlay". Observe that the action sheet opens.
3. Tap outside of the action sheet. Observe that the action sheet closes.
4. Compare the smoothness of the animation with an action sheet found on iOS by opening the "Calendar" app.
5. Tap the "+" button to open the "New Event" modal.
6. Type something into the "Title" field.
7. Tap "Cancel". Observe that an action sheet opens, and the animation appears to be much smoother than the web animation.

Expected behavior:

I expect accelerated animations to run at 120fps on devices that support it.

Actual beahvior:

The web animation appears to only run at 60fps.

Other information:

- I tested this on an iPhone 13 Pro running iOS 16.5
Comment 1 Dean Jackson 2023-06-12 15:30:31 PDT
We would animate purely accelerated animations at 120Hz. But I think the problem is we don't animate custom properties at that rate.
Comment 2 Dean Jackson 2023-06-12 15:31:41 PDT
Comment 3 Liam DeBeasi 2023-06-13 06:10:07 PDT
Created attachment 466680 [details]
Code reproduction with explicit values

Thanks for taking a look. I'm still able to reproduce the reported behavior even when using explicit values for each keyframe. I attached a new reproduction.
Comment 4 Liam DeBeasi 2023-06-29 14:36:52 PDT
Created attachment 466871 [details]
Code reproduction with CSS Animations

I created another reproduction using CSS Animations, so this behavior does not appear to be limited to the Web Animations API. This reproduction also avoids custom properties.

Is there anything else I can do to help isolate this?
Comment 5 Ahmad Saleem 2024-01-29 16:57:09 PST
@Antoine - does below commit address this?

Comment 6 Antoine Quint 2024-01-30 00:59:20 PST
I believe the fix for bug 267541 will address the latest variation (dated 2023-06029) of the reproduction posted by Liam where custom properties are not the values being interpolated. I'll try to check within the next couple of days, I have a few things preventing me from checking just now.
Comment 7 Antoine Quint 2024-01-30 06:46:57 PST
I can confirm that the translation animations run at 120Hz in all three demos.

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