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?

Solution 1

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!

Solution 2

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.

Solution 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);
    });
}

Solution 4

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

View more solutions

Comments

[oliferna]

I think I found the solutions, thanks to this: tonylea.com/2010/safari-overflow-hidden-problem It seems that Safari doesn't respect the overflow:hidden if position:relative is not set

[Coral Doe]

@oliferna: If you found the answer on your own, please answer your own question and mark it as accepted to provide help to others having this issue.

[Matthew Chwat]

@oliferna Understand that. My answer was a new issue seen with the update to iOS6. When rotating from portrait to landscape, then back to portrait, you would see the whole site shift over and no longer respect width=device-width. My parent elements had position declared on them and worked in <= iOS 5. Go to bestbuy.com from an iphone with iOS6 on it. Flip from portrait to landscape then back to portrait. Observe funky-ness. My solution above, declaring overflow hidden, was my fix.

[semateos]

I added overflow:hidden to a container element that wrapped the whole page and that fixed it for me

[Robin]

I noticed the same issue with an input element here. It seems to me that on orientation change the inputs width isn't calculated as fast as the viewport. Adding overflow hidden to its wrapper element fixes this.