Zooms out on a page when opening a menu

Question

I use the Yahoo PureCSS library along with the sidebar plugin and it works fine in all browsers except mobile Safari. For some reason, it scales whenever a menu opens. This even happens in the documentation. I have no idea what could be causing this, but the temptation is to simply call it a browser error.

If necessary, I can build a JSFiddle.

Answer 1

This question actually came down to the fact that it was the same as Overflow: Hidden, used to work on iPhone Safari? . I think Mobile Safari will zoom out to make room for the menu and content area when the user opens the menu, unless you do this on the wrapper element:

html, body { overflow-x: hidden; } 

Answer 2

The viewport meta tag does not contain a maximum scale value. If you update the viewport tag to the following, you will not get the same scaling every time the user clicks on the menu:

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

Note the addition of maximum-scale=1 to the end of the line. When this is added, the content will move instead of scaling. This has been tested on the PureCSS demo page for the Responsive side menu associated with the above.