orientation bug with -webkit-overflow-scrolling : touch
I have been playing around with -webkit-overflow-scrolling:touch; for a while and I getting randomly the following problem:
I only need scroll top/bottom ( width is fixed ), but sometimes the user needs to scroll left and right to trigger the vertical scroll.
In other words, the user has to scroll horizontally to make the container scroll vertically.
again it is random, some times it just works. I already have check all the relative positions for the child elements within the scroll. any thoughts ?
I had as well a scroll that never broke and by looking at the html inside it I realised that if you apply the -webkit-overflow-scrolling:touch; in ul element it will never break.
the scroll that used to break had many elements within it and all I had to do was make the ul elements scrollable separately.
Ran into the same problem, been struggling with it forever until I did this:
Changed overflow-y: scroll to overflow: scroll. I've loaded up the page close to 20 times now and haven't experienced the left/right going up/down weirdness.
I work on a complex web application that uses multiple iframes. I have a window.setInterval setup that removes native scrolling from hidden iframes and adds it to the visible iframe. This works great except I experienced the same issue where I had to swipe left / right to scroll up down. I noticed if you opened or clicked on a different browser tab and then clicked back it fixed itself. We fixed our issue by adding the following jQuery after we apply the native scrolling to the visible iframe:
I am thinking this must force a repaint similar to clicking on a different tab and then clicking back does. Hopefully this helps someone in a similar situation!
As stated in the comments by Graygilmore. This worked for me:
// NOTE 2019-04-09: [referenced link was removed]
Make sure no parent element of the scrollable area is visibility:hidden or display:none.