Bug 185614
| Summary: | Mobile Safari: Momentum scrolling stops working for a couple of seconds | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | André <andre.koenig> |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED MOVED | ||
| Severity: | Normal | CC: | bfulgham, makarchick, simon.fraser, thorton, tyler, webkit-bug-importer, wenson_hsieh |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari 11 | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
| See Also: | https://bugs.webkit.org/show_bug.cgi?id=228907 | ||
André
Scrolling an area with activated momentum scrolling (-webkit-overflow-scrolling: touch) AND "deactivated rubberband" leads to a scenario in which the scrolling is blocked for a couple of seconds.
I created a demo for that case: https://codesandbox.io/s/134y68k187
The important parts are:
*html* element:
```
html {
...
overflow: hidden;
position: fixed;
overscroll-behavior-y: none;
...
}
```
The actual "content" element with the scrollable list:
```
align-self: stretch;
background: rgba(0, 0, 0, 0.01);
flex: 1 1 auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
```
Unfortunately, the scrolling stops working when accidentally start the scrolling interaction on the header and moving the finger to the list. When doing that, the respective list with cards is not scrollable anymore.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Simon Fraser (smfr)
This is a UIKit behavior where you can't scroll when something is rubber-banding, I think.
makarchick
I experience the same bug, without using "overscroll-behavior-y". Here's my reproduction: https://codesandbox.io/s/1qz8v5q5wq
This is the relevant StackOverflow question https://stackoverflow.com/questions/39692337/div-scrolling-freezes-sometimes-if-i-use-webkit-overflow-scrolling that received no answer since 2016.
Tyler Sticka
We've experienced this bug on a recent project, and have been able to reproduce it in all of our projects that use -webkit-overflow-scrolling: touch on a fixed-position element. It can be tough to reproduce, but as André mentioned in his comment, it appears to happen when you've scrolled to the very top or very bottom of an element and a portion of your finger drifts onto a nearby element. I've had more success reproducing if _after_ your finger drifts, you attempt to scroll the opposite direction before the elasticity has resolved.
Another demo that suffers from this issue: https://codepen.io/tylersticka/pen/15bdad0e1241a8556e4016905dc31ef9/
Radar WebKit Bug Importer
<rdar://problem/44777596>
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.