Bug 218124 - Transforming content while scrolling causes scrollbar to be placed in the middle of the screen
Summary: Transforming content while scrolling causes scrollbar to be placed in the mid...
Status: RESOLVED MOVED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Compositing (show other bugs)
Version: Safari Technology Preview
Hardware: iPhone / iPad Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2020-10-23 08:04 PDT by Liam DeBeasi
Modified: 2022-02-10 22:03 PST (History)
3 users (show)

See Also:


Attachments
Xcode Project (61.00 KB, application/zip)
2020-10-23 08:04 PDT, Liam DeBeasi
no flags Details
Video of Bug (11.06 MB, video/mp4)
2020-10-23 08:05 PDT, Liam DeBeasi
no flags Details
Source code (2.93 KB, text/html)
2020-10-23 08:05 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 2020-10-23 08:04:25 PDT
Created attachment 412178 [details]
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.
Comment 1 Liam DeBeasi 2020-10-23 08:05:21 PDT
Created attachment 412179 [details]
Video of Bug
Comment 2 Liam DeBeasi 2020-10-23 08:05:48 PDT
Created attachment 412181 [details]
Source code
Comment 3 Radar WebKit Bug Importer 2020-10-23 10:32:53 PDT
<rdar://problem/70625201>
Comment 4 Brent Fulgham 2022-02-10 22:03:39 PST
The fix for this issue was needed outside the WebKit project, therefore this is being resolved as 'Moved'.

This should now be fixed in shipping software.