Bug 222654 – Scrolling in home screen apps incorrectly latches to document

• Component: Scrolling
• Status: NEW

[Liam DeBeasi]

Created attachment 422079 [details]
Code reproduction

When using an app added to the home screen, scrolling incorrectly latches to #document, making it impossible for users to interact with the app.

Steps to reproduce:

1. Open the attached code reproduction on an iOS device.
2. Add the code reproduction to the home screen and then launch it.
3. Verify that you can scroll the main content.
4. Tap the input and then close the keyboard.
5. Swipe up on the header element.
6. Immediately after this, attempt to scroll on the main content. You should not be able to.

If you were to inspect this using Safari Dev Tools and add a scroll listener, you should notice that the scroll event's target during step 6 is "#document". Sometimes I can get WebKit to re-latch to the main content, but I am not sure what causes that to happen.


Expected Behavior:

I would expect WebKit to never latch to #document for scrolling and continue to latch to the main content.


Actual Behavior:

WebKit latches to the #document for scrolling.


Additional Information:
- This was tested on iOS 14.5, but I can reproduce this on earlier versions of iOS 14.
- This only happens when the app is installed to the homescreen. Running this in Safari does not reproduce the issue.
- This does not happen when running the app inside of WKWebView in a Capacitor or Cordova application.

[Simon Fraser (smfr)]

I believe there are two issues here:
1. the document is scrollable on home screen web apps when it should not be (bug 214781)
2. UIKit has a bug where, if an ancestor scroll view is rubber banding, you have to wait for it to stop before you can scroll the inner scroll view (tracked internally).

[Radar WebKit Bug Importer]

<rdar://problem/75264303>

[Lincoln Baxter, III]

Any updates on this? We are struggling to control the very strange user interactions this causes on our full-page website.

This bug is impacting the user experience for many webkit users worldwide that are using PWA's. Can we expect any progress on fixing this issue in the (near) future?

Hi there! This impact me, too. Video here:

https://github.com/ionic-team/ionic-framework/issues/27697

Hi there.

Sorry for the dupe comment. I just wanted to relay that this issue has been reported to me more times than I can count *just in the past 48 hours* by users of wefwef (https://wefwef.app).

It's even worse that I previously thought. Any time the user tries to swipe during a page transition where pointer events are disabled, Safari will latch scroll to the document.

Users then try to scroll the feed once the animation is complete, but they're stuck! The latching time is also juuuust long enough that users don't wait enough for it to unlatch, and they think the page is frozen.

Here's a few users in the wild complaining about this very specific bug from the last *60 minutes*:

> Scrolling also sometimes gets “frozen” briefly when returning to my feed. This happen to anyone else?

> Yes to the freezing. It needs a second or two before you can scroll.

Resolving this is really important for webapps installed to the homescreen.

[Lincoln Baxter, III]

Yep, this is still a major issue in 2023. We've implemented a number of hacks to make this occur less frequently, but they are indeed hacks.

body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  overscroll-behavior: none;
}