Bug 218124 – Transforming content while scrolling causes scrollbar to be placed in the middle of the screen

• Status: RESOLVED
• Resolution: MOVED
• Component: Compositing

[Liam DeBeasi]

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.

[Liam DeBeasi]

Created attachment 412179 [details]
Video of Bug

[Liam DeBeasi]

Created attachment 412181 [details]
Source code

[Radar WebKit Bug Importer]

<rdar://problem/70625201>

[Brent Fulgham]

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.