Overflow-x:hidden; on mobile device not working

Question

I hope you guys can help me cause I cant seem to wrap my head arroud this. I build a one-page site which works fine, except for one thing, which is the overflow-x:hidden on

Answer 1

if you applied overflow-x:hidden to the body, you might wanna apply to html too.

  body,html {
overflow-x:hidden;
}

Answer 2

As pointed out by Dorvalla, body and html tags are ignored by smartphones browsers, although not by "big screen" browsers, I solved the issue by using the first child of the page structure, so no need of an aditional wrapper.

e.g. for my WordPress case:

    .site {
        overflow-x: hidden;
        /* Unnecessary IMHO, uncomment next line to force hidden behavior */
        /* overflow-x: hidden !important; */
        /* Additional tunning proposed by the community */
        position: relative;
        width: 100%;
    }

Answer 3

I found that applying:

overflow-x: hidden

to the div wrapper inside the body made the scrolling a little jumpy on iOS Safari so therefore just gave it overflow: hidden and left the body as visible. This worked perfect for me in all browsers and devices I needed.

Answer 4

I had this same problem and tried applying body with overflow-x: hidden;, and lots of other answers, but what did work in my Wordpress, was applying a global CSS rule as below.

body,html {
overflow-x: hidden;
}

This eliminates the movement left to right on mobiles. The HTML part is needed, not just body!

Answer 5

Found the answer actually here on Stack overflow:

The browsers on mobile devices ignore the overflow-x:hidden within the body and html tag if <meta name="viewport"> tag is present, thus i created a wrapper in the body tag covering the rest of my content with a overflow-x: hidden in it, solving the problem.

Documentation:

Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers.

The bad thing is that it prevents the use now of a jquery plugin, that scrolls....

Answer 6

Try setting minimum-scale=1 instead of maximum-scale=1.

minimum-scale controls how far out the user can zoom, while maximum-scale controls how far in they can zoom. To prevent viewing of the overflow you need to limit the user's ability to zoom out, not in.