Overflow-x: hidden; not working on android devices

Question

I have come to the conclusion that this is an android only problem, being caused by how my navigation menu works, and am running out of ideas to try. The menu is pushed 100% from the left to hide the menu. I am then using css transitions to have the menu slide out from the right side to 80% of the window. Once the menu is toggled it is leaving an open and empty space to the right side where the menu is hiding. I can't use display: none; since it will kill the animation. Important The problem only happens once the menu is toggled.

I have tried:

• SO Q1

• SO Q2

• SO Q3

• SO Q4

• overflow on the body, html, wrapper, .searchCont, and more.

Update 2/6/2014

Here is the navigation menu css:

ul.subNav {
    position: absolute;
    top: 70px;
    left: 100%;
    transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    visibility: hidden;
    width: 80%;
    background: #f7f7f7;
    border-left: 5px solid #00529f;
    z-index: 100;
}

End update

Here is the css:

.wrapper {
    max-width: 100%;
    height: 100%;
    background: #20aad7;
    background: url("../images/bg.png"), -moz-linear-gradient(-45deg, #20aad7 0%, #54709f 31%, #64b491 65%, #047074 100%);
    background: url("../images/bg.png"), -webkit-gradient(linear, left top, right bottom, color-stop(0%,#20aad7), color-stop(31%,#54709f), color-stop(65%,#64b491), color-stop(100%,#047074));
    background: url("../images/bg.png"), -webkit-linear-gradient(-45deg, #20aad7 0%,#54709f 31%,#64b491 65%,#047074 100%);
    background: url("../images/bg.png"), -o-linear-gradient(-45deg, #20aad7 0%,#54709f 31%,#64b491 65%,#047074 100%);
    background: url("../images/bg.png"), -ms-linear-gradient(-45deg, #20aad7 0%,#54709f 31%,#64b491 65%,#047074 100%);
    background: url("../images/bg.png"), linear-gradient(135deg, #20aad7 0%,#54709f 31%,#64b491 65%,#047074 100%);
    background-repeat: repeat;
    overflow-x: hidden;
}

Finally, here is a fiddle/live site: Demo-fiddle/Demo-live-site

---

Here is an image of what the problem looks like:

Answer 1

Ran into the same problem, applying an overflow-x: hidden to the html and body didn't do anything in Android. Put a container div inside your body and have that wrap everything on the page. Add an overflow-x: hidden to that container div and the problem is solved.