CODEWITHSUNDEEP
javascripthtmlcssowl-carousel
Christopher Dell'Olio
Christopher Dell'Olio

Reputation: 91

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

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.

Upvotes: 7

Views: 4227

Answers (2)

Nenad Milosavljevic
Nenad Milosavljevic

Reputation: 147

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)

Upvotes: 0

Perran Mitchell
Perran Mitchell

Reputation: 1158

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

Upvotes: 3

Related Questions