css - When scrolling down on Safari in iOS the page scrolls sideways too easily when height is set on the container

Question

I'm building a web page that consists of multiple columns. The page has CSS mandatory scroll snapping enabled on the x axis so that after each horizontal scroll the page should snap so the closest column is centred.

What's odd is that on Safari on iPhone it seems to scroll sideways way too easily when height is set on the scroll container. Even a vertical scroll that has even a tiny amount of sideways movement in it – as is natural when you're scrolling with your finger – makes the page scrolls sideways.

However when I unset height it just scrolls normally and isn't overly sensitive to sideways movement.

Why does a fixed height affect the scroll sensitivity?

I've put up a codesandbox here.

You can test the difference by uncommenting the height: 100vh style on the .container class.

question from:https://stackoverflow.com/questions/65900964/when-scrolling-down-on-safari-in-ios-the-page-scrolls-sideways-too-easily-when-h

Answer 1

Waitting for answers