All geek questions in one place

Overflow-x value ignored in mobile safari

We set the overflow-x values ​​to both the body and the scrollable elements, but mobile Safari ignores these values. On the desktop, 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 something that is outside the viewport, sliding into view only after someone makes a gesture.

Playback:

1) Visit www.tekiki.com on your iPhone (not iPad). Scroll to the right and you will see how page_page expands the width of the site, although we fixed the width of the body.

+4
source share
6 answers

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

+13
source

Tested with Mobile Safari on iOS 7.1 / 8.2 The following code didn’t help me either.

html {overflow: hidden; }

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

html {overflow: hidden; position: fixed; }

+4
source

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

This solution does not work for me.

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

CSS

 #wrapper { overflow-x: hidden; }

HTML

 <html> ... <body> <div id="wrapper"> ... </div> </body> </html>
+2
source

in my case the following solution to the problem

 body, html { overflow-x: hidden; }
+1
source

To solve the problem on older devices (iphone 3), I had to mix solutions because they did not work synchronously.

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

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

and styles:

 #wrapper { overflow: hidden }

and it finally worked.

0
source

If html, body overflow-x: hidden; does not work, try to find the text indent. For example, flexslider options by default have some elements set to text-indent -9999px . I found that this is an override of the html overflow rules.

0
source

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

More articles:


All Articles