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

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.

Answer 2

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 3

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 4

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!

Answer 5

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