Opening mobile menu in Chrome for Android by setting width only works first time.

Question

So I'm trying to have a mobile menu that slides out on the left when an icon is clicked, and disappears again after you click outside the menu. Like this:
http://codepen.io/anon/pen/LzJuq (old, see new codepen below)

And it works fine on desktop and in Android's default Browser.

On my phone, in Chrome, the menu will only open the first time. Each subsequent time it closes itself before it finishes opening.

I can see that it tries to open... so I assume, because the #menu-icon is actually within the #content, it tries to run them both... but I don't exactly know what to do.

Edit: So I've changed it to just manually set the width instead of adding/remove a class that specifies the width: http://codepen.io/anon/pen/Bmdny
The menu consistently opens now, however the links in the menu seem to be 'transparent' on subsequent opens. I.e, I see the blank background of the menu, but nothing in/on it, but I can still click the links. If I zoom in, even just a little bit, it seems to force the browser to repaint and the menu items appear.

Everything seems to work fine in Android's default browser, just not in Chrome for Android.

I've tried commenting out the css transitions, to no effect. I've tried giving the menu items a z-index higher than the menu itself (I'm desperate, lol), no change.

I just don't understand what's going on.

Thanks.

Info:
Chrome for Android v32
Android 4.3
Samsung Galaxy Nexus

Answer 1

After much searching, tweaking, and hair pulling I began to narrow the problem down to having overflow:hidden; on my menu.

I came across a few random posts of various sources that described a problem similar to mine, and there were always suggestions that it had something to do with the overflow property, but at first I didn't understand.

I was 'hiding' the menu by setting width:0;, so in order to hide the content as well, I had to set overflow:hidden;. If I commented that line out, the menu opened fluidly and consistently, but of course: I could see the menu items all the time. Not what I wanted.

I tried transition the display property to learn that you can't do that. So I tried the visibility property, and at first that didn't work either. However, I came across this post from a guy trying to transition the display property, and this answer happened to work for me.

I still don't understand exactly why this works, I think it has something to do with delaying the second transition so it doesn't stop the first... Here's the article he linked in his answer.

So I guess the problem really had something to do with Webkit and fixed/absolute elements with ul's in them... not repainting after certain... anchor tag clicks? Or transitions? Yeah, I still don't really understand. But it works now!

Answer 2

What navigator are you testing it on? I can't reproduce the error on my phone nor my tablet. However, it seems that as the button is over the #content div, when you click on it, you are clicking both elements.

Try to remove the class only when the menu has it:

$("#content").bind( "click", function() {
    if ($('#mobile-menu').hasClass('open'))
       $('#mobile-menu').removeClass('open');
});

EDIT

Let's try to put an intermediate layer between the menu and the content. Let's bind the menu-closing event to this layer.

Have a look at this: http://codepen.io/anon/pen/jiyHI