Scrolling locked in iOS

Question

I have a strange problem on my mobile site when viewing in Safari on iPhone (5, 6). When I open the left menu of the slides, and then open the submenu (i.e. Electrical Solutions), which has a lot of elements that cannot fit vertically on the screen, scrolling down becomes locked and cannot view the rest of the elements in the submenu. However, if I open another submenu (i.e. Industries) with the previous submenu open, the scroll down will unlock and work fine, and now I can view other items in the first submenu. What I tried: I checked overflow in all of these elements, and nothing turned out wrong, and also added -webkit-overflow-scrolling touch to the body, but still no luck. What are my other validation options?

Answer 1

As far as I can see, you use -webkit-overflow-scrolling:touch in the .sidebar-menu , but not in .submenu , although this should not be a problem, but you can try adding it to the submenu as well. Something else is that your .sidebar-menu does not have overflow:hidden , which I recommend and may be the cause of your problem.

IOS is really nasty of scrolling in my experience, and it is very difficult to keep track of whether you have many layered elements. Also read https://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios , this may give you some ideas.