7

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.

Christopher Dell'Olio
  • 91
  • 1
  • 3
  • You can inspect safari on mobile using safari on mac: https://webdesign.tutsplus.com/articles/quick-tip-using-web-inspector-to-debug-mobile-safari--webdesign-8787 – Germano Plebani Apr 20 '17 at 10:27
  • That's the thing. There is no problem with Safari on my mac. It is ONLY iPhone devices. Tried on an iPhone 7 plus and iPhone 6 plus, same problem. Safari on desktop is working just fine – Christopher Dell'Olio Apr 20 '17 at 10:31
  • Yes but if you connect the iphone to your mac, with safari (desktop) you can inspect safari on ios. Take a look at link i posted before. – Germano Plebani Apr 20 '17 at 10:34
  • Kindly provide with sufficient code to reproduce the scenario. And also go through - https://stackoverflow.com/help/how-to-ask – Gibin Ealias Mar 18 '18 at 15:15
  • Same happens to me it seems, on Iphone 8, Chrome! I had to put overflow-x on a parent element of owl-carousel; if it was only on body, it still did not work. – trainoasis Jun 06 '18 at 05:57

2 Answers2

3

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

Perran Mitchell
  • 1,148
  • 1
  • 10
  • 19
0

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)

Al.G.
  • 4,327
  • 6
  • 31
  • 56
Nenad Milosavljevic
  • 147
  • 4
  • 15