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.

Answer 2

I managed to sort my similar issue out - perhaps this will work for you?

You'll need to work out if it's a particular div or other element that's causing it by deleting/reinstating different bits and retesting the page. Once you've worked it out try adding an overflow: hidden property to that element in your CSS - I used overflow-x: hiddensince my issue was horizontal scrolling but you may need to vary it.

Hope this is of use... good luck!

Answer 3

Jereon, your JavaScript worked for me. My viewport is:

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

I'm using the Drupal Corporate Clean responsive theme. I have not had this problem using the Omega responsive theme framework.

Answer 4

The solution for this is as proposed by @ellawson

Problem is caused by some element not being scaled correctly by the browser when rotating the device. Find that element and apply overflow: hidden; or overflow-x: hidden; as he says.

Answer 5

Note: this question is a duplicate. I'll post the gist of my answer here.

2015 update

All the other answers are unfortunately incorrect, outdated, or misguided. Here's what works:

  window.addEventListener('orientationchange', function () {
    var originalBodyStyle = getComputedStyle(document.body).getPropertyValue('display');
    document.body.style.display='none';
    setTimeout(function () {
      document.body.style.display = originalBodyStyle;
    }, 10);
  });

The code listens to the orientationchange event and forced a re-flow of the body element by hiding it and showing it 10 miliseconds later. It does not depend on any <meta> tags or media queries.

You said,

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

That is key. You just need to force a re-paint of the body.

Answers that suggest adding <meta name="viewport" content="width=device-width, initial-scale=1.0"> or variations thereof, as of Safari 7, no longer wors. Here's a demo. To make sure you see how it doesn't work, start with the iPad in landscape mode, load the page, then rotate. Notice the page doesn't expand to full height, despite using flexbox all the way.

Compare that to this page, where we use the hide/show body technique in production.

Answer 6

I came across this problem with an iPad and applied html { overflow-x:hidden; } . That seems to have resolved the issue.

Answer 7

try adding the following setting to your content properties: maximum-scale=1

or try this: user-scalable=no

here is the ios documentation