meanthemes/meanMenu — pull request #40 by hussra (2014-07-03 15:29:04+00:00)
Title: Android events

I've been looking into this because of a WordPress theme I'm using that incorporates MeanMenu. However, the issue can be reproduced with the MeanMenu demo as well just by changing the value of meanScreenWidth.

The device where I noted the issue is a Nexus 7 tablet, 2012 version, running Android 4.4.4 and the latest version of Chrome. On this device and with my site (or on the demo page with meanScreenWidth changed to, say, 640) the regular menu should appear with the tablet horizontal, but the meanMenu in portrait orientation. This doesn't happen.

What I've found is that the onorientationchange event fires at the right time, but the screen width reported will not be correct as the event seems to fire before the screen is repainted. My first stab at fixing this was to use a timeout to delay the event handling code 500ms until the screen has been repainted. This worked except in the case where the tablet was reoriented while Chrome was running but not in the foreground.

I also found that in Firefox for Android (latest version) the onorientationchange event isn't support, but screen.onmozorientationchange is. That looked promising but the same problem occurs if the tablet is reoriented with Firefox running but not in the foreground.

The onresize event always fires and, in my testing, the screen size is always reported correctly within it (i.e. event is fired after the screen size has changed).

So the first commit https://github.com/hussra/meanMenu/commit/1c383e35c0c89d520f402911f98e26faa43238e5 changes the event handling to just use onresize().

The second commit https://github.com/hussra/meanMenu/commit/8b67265de0354930838249c4bccb612f49cadddb fixes a further minor issue where the meanMenu toggle may not be correctly centred when switching orientation as meanStyles hasn't been recalculated correctly.

Some screenshots of the issue (from the demo page of the theme I'm using) at http://richardhuss.dreamhosters.com/exodus-screenshots/

I've tested this on my own site in Firefox 30, Chrome 35, IE 10 and 11, latest Chrome and Firefox on Android 4.4.4, and stock browser on Android 2.3. Also made a special trip to the Apple Store in town today and was able to test very briefly in the latest Safari on iOS on an iPad Air, iPad Mini and iPhone 4S.