Overflow-x value ignored in mobile safari

问题

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.

回答1:

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

回答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; }

回答3:

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>

回答4:

in my case, the following did solve the problem

body, html {
  overflow-x: hidden;
}

回答5:

In order to solve the issue on older devices (iphone 3) as well I had to mix the solutions, because they didn't work singularly.

I ended up adding a wrapper div to the html body:

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

and styling it with:

#wrapper { 
  overflow: hidden 
}

and it finally worked.

回答6:

If html, body overflow-x: hidden; is not working for you try looking for text-indent. The default settings of flexslider for example have some elements set to text-indent -9999px. I found this was overriding html overflow rules.

来源：https://stackoverflow.com/questions/17767176/overflow-x-value-ignored-in-mobile-safari

标签

iphone

ios

css

html5

mobile-safari