iOS does not respect the overflow-x Hidden

Asked

Viewed 115 times

0

I have a published website and it is featuring a side scrolling in version Responsive when accessed via iPhone that no longer exists on any device. Both in Safari and in Chrome is accessed via iPhone. Android devices work normally.

I have tested several solutions like that one, do not work. I added a container around all the content to try to give overflow-x: hidden and does not respect. I tried to add javascript via maximum width = device width. Nothing.

I removed part of the code to see what generates scrolling and basically it’s all that is in the very center, possibly has to do with the carousels. I also tried to give overflow-x: hidden in them, overflow: hidden, fixed size and etc. Nothing works.

I don’t know what else to do. Someone went through it?

css ios

  • For testing purposes, try this in your CSS: *{ overflow-x: hidden !important; }.

  • Tested commenting or removing the carousel to see if the problem is with himself?

  • Hi @Sam, yes. I had already tested, does not work.

  • @hugocsl yes, Hugo. I’ve done it. The carousel and the Scrollreveal so generating this side scrolling.

  • I tried to take a look here, but I don’t have a test environment to visualize this horizontal bar, in this I won’t be able to help much

  • 1

    @hugocsl Thank you for trying to help anyway :)

Show 1 more comment

1 answer

2


There were 3 problems related to content overflow.

  1. The first was related to library owlCarousel. I had to add fixed width in pixels (I was using 100% container percentage) in the Responsive.
  2. The second was related to youtube subscribers button that was embedded in the code. I had to add overflow:hidden in the container outside the button.

  3. The latter related to library scrollReveal. Analyzing that Issue I tried to solve via CSS by adding overflow-x: hidden for all elements that were sliding left or right. It didn’t work. So I removed this kind of effect in smaller resolutions. As it was being triggered by a class, I decided via jQuery

    if($(window).width() < 680) { $('.rightShow').removeClass('rightShow'); $('.leftShow').removeClass('leftShow'); }

I know that these are very specific problems related to my project, but I decided to publish the answer and keep the article to eventually give a "light" so that you have similar problems. Possibly related to embedded codes.

Browser other questions tagged css ios

You are not signed in. Login or sign up in order to post.