All geek questions in one place

Carousel Owl Bug: Sliding Page on Mobile Safari - iPhone

So, I'm working on http://coin.codeclimb.com now , and for some reason, the owl slider on the main page does not work on iPhone safari. When I'm on the iPhone, he peers ALL the contents of the entire page and breaks things. I can not reproduce the problem on the desktop. Therefore, I cannot use dev tools to identify a problem.

It’s like there are 15 slides, when there are only 2 slides, it just allows you to slide, and the more you slide, the further it pushes all the content to the entire page, including navigation.

Any ideas what is going on? I am using Safari on the iPhone 7 Plus.

+4
source share
2 answers

You have a couple of questions:

  • overflow-x:hiddendoes not work with an item bodyin some versions of mobile safari. This means that your content spills horizontally out of its container. This confuses the browser as it does not know which element it should scroll.
  • You removed overflow:hiddenfrom line 77 of owl.cssand added lines 1121 to 1134 of your file style.css, directly affecting the functionality of OwlCarousel.

The simplest solution is to add overflow-x:hiddento the element htmlinstead of the element bodyand remove additional lines fromstyle.css

0
source

overflow-x: hidden html .
(20 ), (iphone SE)

0

Source: https://habr.com/ru/post/1675246/

More articles:


All Articles