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 |
||
verypublicyeah913j
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.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Radar WebKit Bug Importer
<rdar://problem/66114283>
Simon Fraser (smfr)
I do see that on the home screen, it's possible to rubber-band the body that reveal the red.
verypublicyeah913j
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.
ik
Same/similar issue: https://bugs.webkit.org/show_bug.cgi?id=220908
Maciej Stachowiak
*** This bug has been marked as a duplicate of bug 220908 ***