Bug 214781

Summary:	Inconsistent scroll behavior when using overflow:hidden on body if added to home screen
Product:	WebKit	Reporter:	verypublicyeah913j
Component:	Scrolling	Assignee:	Nobody <webkit-unassigned>
Status:	RESOLVED DUPLICATE
Severity:	Normal	CC:	ik, koivisto, mjs, simon.fraser, tgels, webkit-bug-importer
Priority:	P2	Keywords:	InRadar
Version:	Safari 13
Hardware:	iPhone / iPad
OS:	iOS 13
See Also:	https://bugs.webkit.org/show_bug.cgi?id=222654 https://bugs.webkit.org/show_bug.cgi?id=240860

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 ***