Bug 214781 - Inconsistent scroll behavior when using overflow:hidden on body if added to home screen
Summary: Inconsistent scroll behavior when using overflow:hidden on body if added to h...
Status: RESOLVED DUPLICATE of bug 220908
Alias: None
Product: WebKit
Classification: Unclassified
Component: Scrolling (show other bugs)
Version: Safari 13
Hardware: iPhone / iPad iOS 13
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2020-07-24 21:35 PDT by verypublicyeah913j
Modified: 2024-09-10 12:40 PDT (History)
6 users (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description verypublicyeah913j 2020-07-24 21:35:03 PDT 
Adding overflow:hidden to body doesn't prevent scrolling if the page(apple-mobile-web-app-capable) is added to the home screen. It does however prevent scrolling if it's not added to the home screen.

This bug results in a terrible user experience where you might scroll in some element, and when it ends you'll start scrolling on the body even if there is nothing to scroll. And then you need to wait for the bounce animation to stop before you can scroll the other way, or else you'll just scroll the body and not the scrollable content.

How to recreate:
1. Open e.g. https://alexskra.github.io/ios-scroll-bug/ in safari and add it to the home screen.
2. Open it and scroll to the bottom.
3. Wait for the animation to stop.
4. Scroll further down.
5. The body starts to scroll. (the red body is shown)
6. Scroll up before the animation stops. (you're unable to do so as you're now scrolling the body, not the content)

It does work as expected if you just open it in safari.
Comment 1 Radar WebKit Bug Importer 2020-07-25 19:06:00 PDT 
<rdar://problem/66114283>
Comment 2 Simon Fraser (smfr) 2020-07-29 11:22:56 PDT 
I do see that on the home screen, it's possible to rubber-band the body that reveal the red.
Comment 3 verypublicyeah913j 2020-08-18 06:08:37 PDT 
From what I can remember, this used to be a problem in Safari too, but it was halfway fixed there last year, but the fix didn't work when running standalone.

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

The fix also doesn't work for safari when the keyboard is displayed. When the keyboard is displayed you'll be able to scroll the body again. You first have to scroll the body, then you'll have to wait for the stupid bounce effect to stop, and then you'll be able to scroll the element you actually want to scroll.

So the current situation from what I can quickly see is this:

Will you be able to stop scrolling on the body element?
Is it running standalone? No.
Is it running in Safari, without the keyboard open? Yes.
Is it running in Safari, with the keyboard open? No.

This is terrible to write sites for as it's so buggy and inconsistent.
Comment 4 ik 2022-02-13 05:20:24 PST 
Same/similar issue: https://bugs.webkit.org/show_bug.cgi?id=220908
Comment 5 Maciej Stachowiak 2024-09-10 12:40:00 PDT 

*** This bug has been marked as a duplicate of bug 220908 ***