Scrolling locked in iOS

Question

I have a weird issue on my mobile website when viewed in Safari on an iPhone (5, 6). When i open the left slide menu and then open a submenu (i.e. Electrical Solutions) that has considerably many items that cannot fit vertically on the screen, the scroll down touch gets locked and can't view the remaining elements in the submenu. However, if i open another Submenu (i.e. Industries) with the previous Submenu kept open, the scroll down unlock and works normally and now i can view the other elements in the first submenu. What i tried: I checked the overflow in all these elements and nothing looks wrong and also added the -webkit-overflow-scrolling touch to the body but still no luck. What are my other options to check?

Answer 1

As far as I can see you use -webkit-overflow-scrolling:touch at the .sidebar-menu but not at the .submenu, though this should not be an issue, but you might try to add it to the submenu as well. Something else is that your .sidebar-menu has no overflow:hidden, which I do recommend and might be the cause of your issue.

IOS is really nasty with scrolling in my experience and it is very hard to track if you have many layered elements. Also read https://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios it might give you some ideas.