Opening Mobile Menu In Chrome For Android By Setting Width Only Works First Time.

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/pe

Solution 1:

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

Solution 2:

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!