iOS6 Safari方向变化bug？

Question

我在Safari和iOS6中遇到了罕见的问题。 当从横向模式切换到纵向模式时，视口会被重新调整大小，但似乎它的水平位置没有正确地定位。 它向左偏移了正好128像素。

我能够在运行iOS6的iPad3上通过访问www.google.com来重现此行为。

如果像这样更改html的显示属性：

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

视口将返回原始位置并且正确显示。 这就是我认为这是一个bug的原因。

有任何想法如何解决这个问题吗？

- oliferna

Answer 1

今天早上我注意到一个类似的问题。

每当方向从横屏切换为竖屏时，整个body元素会向左移动近一半的位置，而应该是100%的宽度。这是在iPhone 4s上运行的iOS 6中的移动Safari。

我找到了问题所在，是由于我有一个全宽度的搜索栏。在这个栏的父元素上，我设置了overflow: hidden;属性。

这最终解决了我的问题。我花了很长时间检查其他网站，发现这种方法可能无法解决你的问题。例如，在BestBuy.com上并没有起作用，尽管他们也遇到了同样的问题。

- Matthew Chwat

---

我认为我找到了解决方案，感谢这个链接：http://www.tonylea.com/2010/safari-overflow-hidden-problem/如果没有设置position:relative，Safari似乎不会尊重overflow:hidden。 - oliferna

如果您自己找到了答案，请回答您自己的问题并将其标记为已接受，以帮助其他遇到此问题的人。 - Coral Doe

@oliferna 理解了。我的回答是关于iOS6更新后出现的新问题。当从纵向旋转到横向，然后再旋转回纵向时，整个网站会移动并不再遵守 width=device-width。我的父元素上声明了位置，在 <= iOS 5 中有效。使用安装了iOS6的iPhone访问bestbuy.com。从纵向翻转到横向，然后再翻转回纵向。观察奇怪的情况。我上面提供的解决方案，声明溢出隐藏，是我的解决方法。 - Matthew Chwat

我在包裹整个页面的容器元素中添加了overflow:hidden，这对我起到了修复作用。 - semateos

Answer 2

这个bug也适用于iPhone上的IOS6。

在orientationchange处理程序中移除和读取占位符将解决此问题。这个解决方案是特定于jQuery的：

$(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);
    });
}

- Michael Wolthers

Answer 3

我遇到了相同的bug，但我的情况是因为有一个带有width:100%属性的标签; 当我把输入框的包裹元素改成overflow:hidden时就解决了这个bug;

在iOS上，对于惯性滚动，将overflow:hidden应用于body的解决方案并不好.

- selahssea

---

我注意到这里的输入元素也有同样的问题。在屏幕方向改变时，似乎输入框的宽度计算速度不如视口快。将其包装元素添加overflow:hidden属性可以解决此问题。 - Robin

Answer 4

我通过这篇文章找到了解决方案： http://www.tonylea.com/2010/safari-overflow-hidden-problem/ 我在HTML标签中设置了overflow:hidden，因为我有一些旋转的DIV被隐藏在左右两侧，但是似乎iOS6中的Safari不接受这个设置。将HTML标签的position:relative设置解决了我的问题！

- oliferna

Answer 5

我不得不在body标签中添加overflow: hidden。

- Elemenofi