overflow：隐藏在body上在ios6中被破坏 [英] overflow:hidden on body is broken in ios6

问题描述

我已经做了一些测试，从我可以看到在ios6上的移动Safari有一个错误。

I have done some testing and from what I can see there is a bug in mobile Safari on ios6.

添加 overflow：hidden c> ，并使用 transform：translateX（100％）; 它为该元素创建一个额外的可滚动空间。
在所有桌面浏览器上，它是隐藏。

When adding overflow:hidden on the body tag and moving an element out of the body using transform:translateX(100%); It creates an extra scrollable space for that element. On all desktop browsers it is "hidden".

这里是一个演示： http://jsfiddle.net/mUB5d/1 。在移动safari中打开它，你会看到什么是错误。

Here is a demo: http://jsfiddle.net/mUB5d/1 . Open that in Mobile safari and you will see what is wrong.

任何人都可以看看safari 6在Mac OS，看看是否存在错误？
除了在我的元素周围创建另一个父类，有没有人知道任何解决方法？

Could anyone take a look at safari 6 on Mac OS to see if the bug is present there too? Does anybody know of any workaround besides creating another parent around my element?

感谢您的反馈！

推荐答案

不。 Mac上的Safari 6不显示该错误。滚动条不存在。

Nope. Safari 6 on Mac does not present with the bug. Scrollbars are not present.

我在OSX Mountain Lion（10.8.2）上运行

I ran it on OSX Mountain Lion (10.8.2)

要进一步回答您的问题，发生这种情况的原因可能有更多地与移动Safari的缩放渲染比溢出隐藏的bug。元素事实上被隐藏在屏幕上（注意下面我已经滚动到右边一直，它仍然不显示我的完整的100％宽度元素 - 其中90％实际上被隐藏。

To further answer your question, the reason this is happening probably has more to do with Mobile Safari's zoom rendering than an overflow hidden bug. The element is in fact being hidden off screen (notice below where I have scrolled over to the right all the way, it still doesn't show me the full 100% width element - 90% of it is in fact being hidden.

这可能与iframe和页面缩放有关。仍然看起来像一个错误。

It likely has something to do with iframes, and page zoom. Still looks like a bug though.

m假设你在一个现实生活的例子中在JSFiddle中演示如果你回到你的现实生活的例子（除了iframe领域），尝试添加这个元标记的头，如果你还没有它，这有助于：

I'm assuming you're demonstrating in JSFiddle from a real life example. If you go back to your real life example (apart from iframe territory), try adding this meta tag to the head if you don't already have it, and see it this helps:

< meta name =viewportcontent =width = device-width，initial-scale = 1>

这篇关于overflow：隐藏在body上在ios6中被破坏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！