React-virtualized: List inside an AutoSizer - scrolling locks up on iOS 11 with Safari

[spjharper]

I've seen some issues here about flickering when scrolling under iOS, but our app is having a very strange problem with scroll gestures being ignored.

The scenario that will make it happen is if we render the beginning of the list so that index 0 is at the top. Then swipe down on the list as if you wanted to see items that precede item 0, then swipe the other direction to scroll items into view with a higher index. Usually when we try the second swipe to show more items further down the list after first swiping in the wrong direction, the swipe has no effect - it will not scroll.
Continued swipes have no effect, but if you pause for about 5 seconds then you can again swipe up and have the scrolling work.

I've tried checking for an index < 0 in the rowRenderer and also tried returning a lightweight element if rowRenderer is called with isScrolling true. Neither has had any effect on the scroll lock up.

This is happening with react-virtualized 9.18.5 with react 16.2.0 under Safari with iOS 11.0.3.

Wondering if anyone else has seen this and if there is a workaround.

[pedro-mass]

Did anyone ever figure this out?

[ADagen]

Catch the same with [email protected], [email protected] under Safari (WKWebView) on iOS 12.

[jassmith]

This is because of overflow chaining. Once overscroll-behavior: none; is properly supported in safari this behavior will go away. Until then you are stuck with safaris garbage.

The only hack I've ever found to semi reliably fix this is to ensure the scrollable region is always at 1 or maxScroll - 1. This way it wont chain to the document scroller.

[dep]

@jassmith

The only hack I've ever found to semi reliably fix this is to ensure the scrollable region is always at 1 or maxScroll - 1. This way it wont chain to the document scroller.

Can you elaborate on this solution a bit? I'm not aware of a maxScroll property