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 the tablet viewport (and probably smartphone too, havent tested that yet)

Despite the body having body {overflow-x:hidden;} which works fine within normal browsers on the pc, i am able to move to the side for about 25 pixels or so, cause thats the overflow of my rotated div, that sticks out of the screen, which i wanted to hide.

Is there a way to fix this? I supplied below part of the head and html / css

The viewport meta tag.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

The CSS applied to the media queries and they respective elements that overflow

@media only screen and (max-width: 992px){
    #skills, #experience    {overflow-x:hidden;}
}
@media (max-width: 479px){
    body                    {overflow-x:hidden;}
}

And the regular CSS applied to the html / body tags

body, html  {height: 100%;width: 100%;font-family: 'Source Sans Pro',Helvetica,Arial,sans-serif;color: #757575; overflow-x:hidden;}

The id's #skills and #experience have a class called .hoek which is defined as followed and causes the overflow.

    .hoek    {margin: 0 -50px; 
              -webkit-transform-origin:left center; 
              -moz-transform-origin:left center; 
              -o-transform-origin:left center; 
              -ms-transform-origin:left center;
              margin-top: -175px;                       
              -webkit-transform:rotate(5deg); 
              -moz-transform:rotate(5deg); 
              -o-transform:rotate(5deg); 
              -ms-transform:rotate(5deg);
              z-index: 20;
    }

I must point out, I think, that the #skills and #experience are sections and not divs. I am not sure if that might be a problem within the code, but I thought not. If there is anymore information that is needed, please let me know, but I thought I had covered the bases here.

I dont know where to begin with a fiddle, so I supply you just the test link of the site: http://www.jellyfishwebdesign.nl/Joost/index.php

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

Found the answer actually here on Stack overflow:

The browsers on mobile deviced ignore the overflow-x:hidden within the body and html tag, 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 5

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 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.