page shifts to the left when rotating iPad from landscape to portrait

Question

I am using CSS media queries to create a web site with responsive design. When I open my test page on the iPad in either landscape or in portrait orientation, it looks fine.

However, when I switch from landscape to portrait mode, the page is shifted to the left. I can tell that the correct CSS is loading because other things on the page change. I can also drag the page to the right and it appears exactly as it does if I had opened the page in portrait initially.

I have my viewport set to: meta id="view" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"

I added JavaScript to fix the iOS viewport scaling bug which used to cause the page to be zoomed in when switching from portrait to landscape. (I used the solution described here: https://gist.github.com/901295 )

I'm having problems finding the name for the bug I'm experiencing when switching from landscape to portrait. Has anyone else seen this or know how to fix?

Answer 1

The problem owner says that she "can also drag the page to the right and it appears exactly as it does if I had opened the page in portrait initially."
This makes me think that, for some unknown reason (a bug?), the page is scrolled to the left at an orientation change to portrait mode (otherwise you wouldn't be able to drag it back).

I had a similar issue and solved it with the following JavaScript workaround:

// ...
// Optionally add a conditional here to check whether we are in Mobile Safari.
// ...
window.addEventListener('orientationchange', function() {
    if (window.orientation == 0 || window.orientation == 180) {
        // Reset scroll position if in portrait mode.
        window.scrollTo(0, 0);
    }
}, false);

Maybe this will work for others too.