Bug 205454 – Poor gesture-based animation performance on fullscreen/"notch" iPhones

• Status: RESOLVED
• Resolution: FIXED
• Component: Animations

[Liam DeBeasi]

Created attachment 386107 [details]
Videos depicting issue as well as Safari Timeline exports

Gesture animations are janky on fullscreen iPhones (devices with the "notch": iPhone X, iPhone 11, etc).

Steps to reproduce:

1. Open https://codepen.io/liamdebeasi/full/dyPvGPw on an iOS device.
2. Tap and drag horizontally anywhere on the screen to begin moving the blue boxes.

On "notch" iPhones, you should notice that the animation is janky. On non "notch" iPhones (i.e., iPhone 7), you should notice that the animation is not janky.

I have observed this behavior by testing on an iPhone 11 and iPhone 11 Max both running iOS 13 and an iPhone X running iOS 12. I was unable to reproduce this janky behavior on an iPhone 7 running iOS 13 and an iPhone 5s running iOS 12.

When taking a timeline in Safari Dev Tools, the results indicate that the animations on my iPhone 11 are 60fps, but that does not seem to match up with what I am seeing on the screen. I have attached a .zip archive that contains videos from affected devices as well as Safari Timeline exports. There is a README file that explains what each file is.

Source code from example above: https://codepen.io/liamdebeasi/pen/dyPvGPw


Additional Information:
You should be able to reproduce this with just about any other gesture animation demo.

Other examples:

1. https://www.framer.com/motion/#features Try the "Drag" example.
2. http://hammerjs.github.io/ Try dragging the white square on the homepage example.

Animations that run on their own don't seem to exhibit this performance behavior: https://codepen.io/liamdebeasi/pen/MWYpyxg.

[Radar WebKit Bug Importer]

<rdar://problem/58119289>

[Alexey Proskuryakov]

This does appear to reproduce. Both iPhone 11 and 11 Pro, so not an LCD vs. OLED issue.

[Liam DeBeasi]

Another observation I made is that the iPhone 11 timeline shows significantly more frames taking >1ms than the iPhone 7 timeline.

It doesn't look like Safari exported the details of what's happening in each frame, but upon re-running my initial tests, it looks like the frames taking >1ms have a) Touch Move Event Dispatched and b) Styles Recalculated. This is expected; however, the iPhone 11 timeline showing more >1ms frames than the iPhone 7 timeline seems odd. If anything, I would expect the iPhone 7 timeline to have more >1ms given that the iPhone 11 is a more powerful device.

I'm not sure that 1-2ms frames would contribute to this much of a performance difference, but as of now it's the only noticeable difference I can see in the timeline between the iPhone 11 and iPhone 7 tests.

[Liam DeBeasi]

I have identified another piece of information that may help track down the source of this issue. I happened to stumble upon this website that shows animations running in a <canvas>: https://ciechanow.ski/gears/

I noticed there are some custom sliders that let you control the animations. It appears as though it is the pointer/touch events that are janky/being throttled, not the animation itself.

Steps to reproduce:

1. Open https://ciechanow.ski/gears/ on a "notch" iPhone.
2. Find the demo right before the "Torque" section. It should have two circles, one yellow and one green.
3. Tap the pause button to prevent the circles from rotating.
4. Drag the slider to see one circle get bigger while the other gets smaller.

You should notice that the custom slider appears to lag as well as the canvas animation.

Upon running a Timeline, it looks like Safari considers the canvas animation to be running at 60+fps (on both my iPhone 11 and iPhone 7). This would lead me to believe that it is the pointer/touch events that are causing this issue, not that the animation itself is slow.

[Liam DeBeasi]

I put together another demo that tests my theory that this issue is related to touchevents/pointerevents being throttled.

I linked up the same animation to a scroll event instead of a touch/pointer event, and the animation was a perfect 60fps throughout. If the root issue was with the animation, I would have expected to see the jank here too.

Steps to reproduce:

1. Open https://codepen.io/liamdebeasi/full/ExjgGJb on a "notch" iPhone.
2. Scroll up and down the page. The blue square should animate across the screen.
3. You should notice that when scrolling, the animation is a smooth 60fps throughout.

Full code: https://codepen.io/liamdebeasi/pen/ExjgGJb

Together with my previous comment about the canvas animations + slider, the issue seems to reside with touch/pointer events being throttled.

[Simon Fraser (smfr)]

I've done a bit of investigation here. It might just be a factor of device performance; I saw different ordering of event dispatch vs. rendering.

[Liam DeBeasi]

Is there anything I can do to help get this issue resolved? Happy to lend a hand where I can. It's pretty frustrating to be running new iPhone hardware and not be able to have smooth gesture-animations on the web.

[Simon Fraser (smfr)]

Could you test on the iOS 14 beta and see if it's better?

[Liam DeBeasi]

I am seeing the same issue happen on iOS 14 beta 2 (tested on iPhone 11). The jank seems to be about the same as it was on iOS 13.

[Liam DeBeasi]

Wanted to follow up and provide an example of this impacting an app on the iOS App Store.

Sworkit (https://apps.apple.com/us/app/sworkit-fitness-workout-app/id527219710) makes use of gesture-based page transitions. After signing in to an account (free to sign up) select an item under the "Essentials" header in the "Workouts" tab. A page will transition in. If you try to swipe back on a notched iPhone you should notice that the gesture is janky due to the issue documented in this thread. This issue should not happen on an iPhone without a notch.

[Liam DeBeasi]

There does not appear to be any notable improvement with this issue on iOS 15 beta 1.

I guess I am a bit confused as to why the issue is happening in the first place. It was previously suggested that this may be a matter of device performance, but I am not sure how that would work given that the issue happens on newer/more powerful phones. Could the larger screen size possibly play a role here?

[Liam DeBeasi]

Testing this again on an iPhone 13 and can no longer reproduce the issue. This issue does indeed seem to be a matter of device performance. I am going to close this since this resolution works for my use case. Thanks for the help!