overflow-x:hidden not working on iPhone

html ios css iphone browser

13,641

Is there a reason that you are using a separate element to scroll and not letting the html element do it?

I have found that phones can be quite temperamental when not using the html element as the scroll, in fact some older android platforms will refuse to scroll at all if it isn't on the html element (Though I realise you specified just iOS in your question).

in regard to your actual question I would think it is because of the conflicting overflows on the same element.

overflow-y: auto;
overflow-x: hidden;

You would probably want to have one element that does the overflow-x and then put that inside of another element that handles the scrolling.

aka: give your .content element a max-width: 100%; and pull out the duplicate .scroll element

13,641

Yaron

Updated on July 12, 2022

Comments

Yaron almost 2 years

I'm trying to create a site that feels like a native app on iPhone/Android devices. I've managed to set it up so html and body do not scroll and I have a single content <div> which is the scrollable part.

However, when setting

overflow-x:hidden

to allow only vertical scrolling I still get a horizontal scrolling behavior on iPhone (Chrome and Safari). You can see the scrollbar belongs to the .content element. Setting

overflow:hidden

works as expected and disables all scrolling.

To me it looks like a bug on Chrome.

The code:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<style>
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.scroll {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.content {
    height: 2000px;
    margin: 10px;
    overflow-x: hidden;
    background: linear-gradient(to bottom, #f00 0%, #00f 50%);
}
</style>
</head>
<body>
<div class="scroll">
  <div class="scroll">
    <div class="content">
      <div style="height: 20px; width: 1000px; background: black;"></div>
    </div>
  </div>
</div>
</body>
</html>

Brendan almost 10 years

@Yaron I had a similar problem, and I had to bind the overflow-x property to the <html> element with jQuery before it would work as expected on mobile. Not sure if that helps you or not.
Yaron almost 10 years

@Brendan, Not sure I follow. How exactly do you bind it and to what, and does that effect the other divs in the doc? Maybe a fiddle or code sample could help :)
Žan Marolt about 4 years

Additionally to adding overflow: hidden to html, body I also had to add position: relative
Luca Kiebel over 2 years

While this code snippet may solve the problem, it doesn't explain why or how it answers the question. Please include an explanation for your code, as that really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.