[Webkit-unassigned] [Bug 205454] New: Poor gesture-based animation performance on fullscreen/"notch" iPhones

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=205454

            Bug ID: 205454
           Summary: Poor gesture-based animation performance on
                    fullscreen/"notch" iPhones
           Product: WebKit
           Version: Safari 13
          Hardware: iPhone / iPad
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Animations
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: ldebeasi at gmail.com
                CC: dino at apple.com

Created attachment 386107

  --> https://bugs.webkit.org/attachment.cgi?id=386107&action=review

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.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20191219/42025b19/attachment.htm>