[Webkit-unassigned] [Bug 218124] New: Transforming content while scrolling causes scrollbar to be placed in the middle of the screen

[bugzilla-daemon at webkit.org]

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

            Bug ID: 218124
           Summary: Transforming content while scrolling causes scrollbar
                    to be placed in the middle of the screen
           Product: WebKit
           Version: Safari Technology Preview
          Hardware: iPhone / iPad
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Compositing
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: ldebeasi at gmail.com

Created attachment 412178

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

Xcode Project

Transforming scrollable content while a user is scrolling causes the scrollbar to be misplaced in the middle of the screen. When the transform transition ends, the scrollbar snaps back to the correct location, but if the content has `translate3d(0, 0, 0)` applied, the scrollbar stays in the wrong location.

So far I have only been able to reproduce this in WKWebView on an iPhone with a notch. Additionally, I can only seem to reproduce the issue when "viewport-fit=cover" is set.

Steps to reproduce:

1. Open the attached Xcode project and deploy on an iPhone with a notch. This app creates a WKWebView instance that loads the URL mentioned below.
2. Tap the "Run Test" button and begin scrolling. After 2000ms a "menu" will open and close. Continue scrolling until the menu is closed.
3. Once the menu is closed, you should notice that the scrollbar is in the middle of the screen.

If you would like to compare with how Safari on iOS works:

1. Load https://thirsty-hermann-828f7d.netlify.app/ in Safari on iOS. This is the same website that the Xcode project loads.
2. Tap the "Run Test" button and begin scrolling. After 2000ms a "menu" will open and close. Continue scrolling until the menu is closed.
3. Once the menu is closed, you should notice that the scrollbar is correctly positioned on the right.

As noted previously, removing the `translate3d(0, 0, 0)` from the main content will still reproduce the issue, but it does cause the scrollbar to snap back into the correct place on the right. Perhaps the translate3d is defeating some kind of optimization similar to https://bugs.webkit.org/show_bug.cgi?id=216701?

Files Attached:

"Xcode Project" contains the Xcode project as noted in the steps to reproduce.
"Source code" contains the source code found on the website deployed to Netlify.
"Video of Bug" contains a video of the issue happening on my iPhone 11.

Other Information:

This was tested on iPhone 11 devices running iOS 14.1 and iOS 13.3.

-- 
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/20201023/9c980a54/attachment-0001.htm>