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

We have been struggling with the same issue with my friend (as it turns out, @user3310612 :)) at work for the last couple of days. Absolutelly couldn't understand why EVERY way of moving the menu right (especially transform, which should not affect layout) made the page scrollable right on Android.

Today after seeing the posts that overflow-x doesn't work on Android, I just randomly asked "What happens if you use just overflow:hidden. Expectations — right menu clipped, but probably also cripled page and broken up/down scrolling. Reality — works flawlessly.

So, for us, overflow:hidden on the topmost #container solved the issue. 20 minutes ago :)

Answer 2

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.

Answer 3

You need

#wrapper {position:absolute;}

Answer 4

I found one option that works for now. (Will leave unmarked for better answers)

I ended up making the menu and nav icon position: fixed; since I wanted the menu to be fixed in the same spot if the user scrolls the page to prevent an awkward looking menu.

This fixed my problem only due to position: fixed; since it takes the entire element out of the workflow as if it was not there. Then the body is not perceiving an element to be there so you can no longer scroll to the right side.

ul.subNav {
    position: fixed;
    top: 0;
    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%;
    height: 100%;
    background: #f7f7f7;
    border-left: 5px solid #00529f;
    z-index: 100;
}

ul.subNav.active {
    left: 20%;
    visibility: visible;
}

Answer 5

I guess your "problem" comes from visibility: hidden/ visible.

As the spec says:"hidden - The generated box is invisible (fully transparent, nothing is drawn), but still affects layout."

Try using

display: none|block;

instead.

Or you can avoid the whole thing if you push the menu off-screen to the left (instead of to the right).

BTW: The link to your live site isn't working and there are some errors in your HTML markup on the JSFiddle (e.g. the closing </span> tags) and also your CSS has room for optimization. ;-)

Answer 6

Try replacing

overflow-x: hidden;

with overflow: hidden;

I had the same problem and it worked for me.

Answer 7

I had the same problem and I kind of merged a few of the answers here together so thanks everyone for your input! Here's what I did:

body{ 
    overflow-x:hidden; 
}
.menu{
    position: fixed;
    z-index: 1;
    width: 340px;
    max-width: 85%;
    top: 0px;
    right: -340px;
}
.menu.open{ 
    right:0; 
    position:absolute; 
}

Setting position:fixed; seemed to do the trick, so when I wanted the menu open (and in my case a fixed position was not desirable) I set it to absolute. You could also, as mentioned, toggle the visibility or even set display:none. This was only tested on Chrome for android.

Answer 8

I had the same problem on Android when working on an ionic project. What I did to solve the problem is put {overflow-x:hidden} on the child elements.