0

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

Kenmore
  • 1,525
  • 3
  • 16
  • 39
  • I was using jQuery 2.0.3. I tried changing to 1.11.0 (didn't mean to have 2.x on this project anyway). That didn't help. Just FYI. – Kenmore Feb 09 '14 at 03:00
  • Also, I've noticed that whenever I change the zoom level, even the tiniest bit, it works... but only that first time. Then I zoom in or out again and it works once more, very consistently too. – Kenmore Feb 10 '14 at 02:56
  • I tried altering the code so it directly alters the width property instead of changing a class, and the menu opens on subsequent tries HOWEVER, the menu items are gone! I mean: they are there the first time; but when I open the menu any time after that the links just aren't there. I can still tap them though. If I zoom in they appear. – Kenmore Feb 12 '14 at 04:03
  • Because the issue doesn't actually seem to be related to the original title (mentioning jQuery), I've rewritten the title and the post. Hopefully someone has some insight to this problem. – Kenmore Feb 12 '14 at 18:47

2 Answers2

0

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

ojovirtual
  • 3,332
  • 16
  • 21
  • Your suggestion won't make a difference because I'm not worried about it removing a class that doesn't exist. I'm using Chrome 32 on Android 4.3. I actually just tested it on the default Android Browser and it works fine. So it's just Chrome for Android. I tried 'locking' the class for a small period of time so it can't be immediately removed; like this: http://codepen.io/anon/pen/Ktcmu And that didn't make a difference. – Kenmore Feb 09 '14 at 02:33
  • I have edited the solution. Have a look at it. BTW, I am testing your examples on Android 4.1.2 / Chrome 32 and both work great. Have you tried my original solution? – ojovirtual Feb 09 '14 at 10:10
0

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!

Community
  • 1
  • 1
Kenmore
  • 1,525
  • 3
  • 16
  • 39