Menu intermittently rendering mobile menu incorrectly.

[Spindrift]

Hi guys,

I have a responsive menu on my site. I recently made the mobile version of the menu with position:fixed; so it stays along the top of the site when the user scrolls.

However, for some strange reason, when viewing the site on a mobile (I think just on iPhone), on the homepage, the text and spacing on the expanded menu appears bigger than it should. This happens intermittently though and not every time which is strange - maybe it's a Javascript conflict?

Please see attached screenshots to see what I mean.

This is how it should appear...

...and this is how it sometimes appears...

You can view the site (Link removed by Mod)

Thank you very much guys, hoping you can help me get to the bottom of this!

SM

[BenPleysier]

Assuming that the link that has vanished read Professional Live Music Agency - Tailored Entertainment  then this could be the problem.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>

This will prevent resizing.

[Spindrift]

Hi BenPleysier,

Thank you very much for the reply - admin removed the link for some reason...

I updated that line so it now reads:

<meta name="viewport" content="width=device-width, initial-scale=1">

...but the same issue appears.

Can you suggest anything else?

Thank you again, really appreciate your help.

SM

[BenPleysier]

This is what I get on an iPhone

Are you using an actual phone or a simulated phone?

[Spindrift]

Hi BenPleysier,

Thank you for the reply.

That's the one and that looks fine - however, the issue is when you expand the menu; sometimes it appears like my first screenshot (in original post), like how it should. Then if you refresh the page and expand the menu, the text and menu items appear more spaced, like the second screenshot.

Yes, we are using an actual phone and not simulating it.

If you have any thoughts or suggestions please let me know!

Thank you very much,

SM

[Nancy OShea]

You might want to clear out your memory & cache.

http://www.macworld.co.uk/how-to/iphone/how-clean-ios-iphone-ipad-junk-files-temporary-files-cache-i...

Follow these steps to clear out the Safari cache:

1. Press Settings > Safari.
2. Scroll down and tap Clear History and Website Data.
3. Tap Clear History and Data.

Nancy

[Spindrift]

Hi Nancy,

Thank you for the helpful suggestion. However, after clearing the Safari cache, the menu issue remains...

SM

[Jon Fritz]

Run the validator at http://validator.w3.org/nu

You will see there are some issues with your meta tags. The corrected viewport meta tag you added is missing a closing quote, that can cause display issues.

[Jon Fritz · Accepted solution]

You may also want to add in the following css to the top of your stylesheet to normalize the text on iphones...

* {

     -webkit-text-size-adjust:none;

}

That will stop the iphone from using its own algorithm to make text more readable and allow you to set your sizes through css with more complete control.

[Spindrift]

Thank you so much Jon, you're a star - you've cracked it

Also, thank you for pointing out the issue with the meta tag, much appreciated.

Thank you Jon and thank you everybody else for all your informative and helpful responses.

Best wishes,

SM