iOS6 Safari orientation change bug?

Question

I'm having an rare behavior in Safari and iOS6. When changing from landscape to portrait, the viewport is resized, but it seems that is no correctly positioned horizontally. It's displaced exactly 128px to left.

I'm able to reproduce this behavior with an iPad3 in iOS6 going to www.google.com

If you change the display property of the html like this:

document.querySelector("html").style.display = "none" document.querySelector("html").style.display = "block"

the viewport returns to origin and its displayed correctly. That's why I think that this is a bug.

Any ideas how to fix this?

Answer 1

I had noticed a similar issue this morning.

Anytime orientation changed from landscape to portrait, the whole body element would be shifted almost halfway to the left, when it should be 100% width. This was mobile safari in iOS 6, running on an iPhone 4s.

I nailed it down to the full width search bar I had. On the parent element of this bar, I placed a property of overflow: hidden;

This ended up solving my problem. I spent a long time inspecting other sites and this may not fix your issue. For example, my fix didn't seem to take on BestBuy.com which is encountering the same issue as well.