Owl Carousel Error: Sliding Entire Page On Mobile Safari - iPhone

Question

So I'm currently working on http://coin.codeclimb.com and for some reason the owl carousel slider on the homepage is not working on iPhone safari. When I slide on iPhone it is swiping ALL the content on the whole page and breaking things. I can not replicate the problem on desktop. Therefore I can not use dev tools to identify the problem.

It's as if there are 15 slides when there is only 2, it just keeps letting you slide and the more you slide, the further it pushes all the content on the entire page, including the navigation.

Any ideas whats going on? I am using Safari on iPhone 7 Plus.

Answer 1

You have a couple of issues here:

1. overflow-x:hidden does not work on the body element in certain versions of mobile safari. This means that your content is spilling horizontally out of its container. This confuses the browser as it does not know which element it should be scrolling.
2. You have removed overflow:hidden from line 77 of owl.css , and added lines 1121 to 1134 of your style.css file, directly affecting the functionality of OwlCarousel.

The easiest solution is to add overflow-x:hidden to the html element instead of the body element, and remove your extra lines from style.css

Answer 2

In my case, even overflow-x: hidden on html element didn't work.
Instead, I added extra padding on body (20px on both sides) which solved the issue and worked fine for me even on small screen devices (iphone SE)