Overflow-x value ignored in mobile safari

iphone ios css html mobile-safari

28,600

Solution 1

Add html { overflow: hidden; } to your CSS and it should fix it.

Solution 2

Tested with Mobile Safari on iOS 7.1/8.2 Following code didn't work for me neither.

html { overflow: hidden; }

I believe it's a bug/feature of Mobile Safari, other browsers, including Safari on OSX works well. But the overflow:hidden works on iPhone/iPad if you also set position:fixed to HTML element. Like this:

html { overflow: hidden; position: fixed; }

Solution 3

It's 2020 but I am still trying to find an answer for this.

After many experiments, I found that this answer was actually the only working one.

However, it does create an odd black bar across the whole page in all browsers. Also, you should not use units for zero values.

Therefore, my final solution is this: (any transform function should do the trick, just remember to set zero values.)

html, body {
    ... (font, background, stuff)

    overflow-x: hidden;
    /* Safari compatibility */
    height: 100%;
    width: 100%;
    transform: translate3d(0,0,0);
}

Be aware, this solution may influence on your navigation. "position: fixed;" will not work on children because of "transform" property set something other than "none" https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed

Solution 4

Add html { overflow: hidden; } to your CSS and it should fix it.

This solution didn’t work for me.

Instead, i create a wrapper div inside the body and apply the overflow-x:hidden to the wrapper :

CSS

#wrapper { 
    overflow-x: hidden;
}

html

<html>
...
<body>
<div id="wrapper">
...
</div>
</body>
</html>

Solution 5

I had the following code to disable double-tap to zoom:

* {
  touch-action: none;
}

This broke overflow scrolling though. Here’s how I fixed it:

pre {
  overflow-x: scroll;
  touch-action: pan-x;
}

View more solutions

28,600

Crashalot

Hello. My friends call me SegFault. Describe myself in 10 seconds? You know those feisty, whip-smart, sometimes funny, and occasionally charming developers who dominate StackOverflow and consider Swift/Ruby/jQuery their native tongue? Yah, I buy coffee for them.

Updated on February 08, 2022

Comments

Crashalot about 2 years

We set the overflow-x values to hidden on both the body and scrollable elements, but mobile Safari ignores these values. On the desktop, the overflow values work fine.

Relevant code:

body { overflow-x:hidden; width:320px; height:100%; min-height:100%; margin:0; background:-webkit-linear-gradient(top,#e8e4dc,#f2f0eb); }

.page_list, .content { max-height:370px; box-sizing:border-box; padding:0; overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch }

#catalog_page { border-left:1px solid #CCC; z-index:28; position:absolute; top:0; width:200px; height:460px; background:white; -webkit-transition:-webkit-transform 0.1s ease-in;; -webkit-transform:translate3d(0,0,0); display:none; }

catalog_page is what sits outside the viewport, sliding into view only after someone does a gesture.

To reproduce:

1) Visit www.tekiki.com on your iPhone (not iPad). Scroll to the right, and you'll see how catalog_page extends the site's width, even though we fixed the body width.

Crashalot over 10 years

awesome, thanks! we tried overflow-x on the HTML element before, and it didn't work? why does this fix this? btw, could you also email me at info at panabee.com? would like to ask a quick question. thanks!
neverbendeasy over 10 years

I would also add "overflow-y: auto" so you can scroll up and down.
Sébastien Gicquel over 9 years

Why the down vote ? This solution works for me and not the one which is accepted.
WhyNotHugo about 9 years

Doesn't work for me. Content just overflows and I get a huge scroll. It's honestly only applicable in very specific scenarios.
Sébastien Gicquel about 9 years

@Hugo Could you show an example ? Like i said, it worked for me and not the accepted answer.
WhyNotHugo about 9 years

I had a div with width:3000px; position: absolute; bottom: 0; Dunno if that enough to reproduce the non-applicability, or if other elements in my DOM made a difference.
Sébastien Gicquel about 9 years

@Hugo Could you make a simple fiddle ? I would like to try.
WhyNotHugo about 9 years

Sorry, I don't have that same code anymore, I went around the issue with some large rewrites. I would have created one if I still had it.
Randy over 7 years

This does not answer the question. Obviously, this did not work for the safari version 2 years ago.
orokusaki over 7 years

Wow, thanks! All of the hacks for this problem are terrible. This worked perfectly (iOS 10 here). Also, I'm only using overflow-x and it works just as well.
Hugo Stiven Laguna Rueda over 5 years

this work but in ios the soft scroll is disabled , any solution?
dma over 2 years

Thank you for sharing this! Adding the transform there fixed the issue I had with Safari ignoring my overflow-x: hidden.