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 have the same bug, but in my case the reason was a input type=text with width: 100%; and when I changed input wrapper to overflow:hidden bug was fixed;

Solution with overflow:hidden for body is bad for inertial scrolling on iOS

Answer 2

I had to add overflow: hidden to the body tag.

Answer 3

This bug also applies to IOS6 on iPhone.

Removing and reading the placeholder in an orientationchange handler will fix the problem. This solution is jQuery specific:

$(window).on("orientationchange", fixIOS6PlaceholderBug);

function fixIOS6PlaceholderBug () {
    var $this,
        originalPlaceholder = "";

    $(document).find("input[placeholder]").each(function() {
        $this = $(this);
        originalPlaceholder = $this.attr("placeholder");
        $this.removeAttr("placeholder").attr("placeholder", originalPlaceholder);
    });
}

Answer 4

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.

Answer 5

I found the solution thanks to this: http://www.tonylea.com/2010/safari-overflow-hidden-problem/

I had overflow:hidden in my HTML tag, since I have some rotating DIVs hidden left and right, but it seems that Safari in iOS6 wasn't accepting that. Setting position:relative to HTML tag solved the problem for me!