css - 溢出 :hidden on body is broken in ios6

Question

我已经做了一些测试，据我所知，在 ios6 上的移动版 Safari 中存在一个错误。

当在 body 标签上添加 overflow:hidden 并使用 transform:translateX(100%); 将元素移出 body 时;它为该元素创建了一个额外的可滚动空间。在所有桌面浏览器上，它都是“隐藏的”。

这是一个演示:http://jsfiddle.net/mUB5d/1 .在 Mobile safari 中打开它，您会发现问题所在。

谁能看看 Mac OS 上的 safari 6，看看那里是否也存在错误？除了围绕我的元素创建另一个父级之外，有人知道任何解决方法吗？

感谢您的反馈!

Answer 1

没有。 Mac 上的 Safari 6 不存在此错误。滚动条不存在。

我在 OSX Mountain Lion (10.8.2) 上运行它

为了进一步回答您的问题，发生这种情况的原因可能更多地与 Mobile Safari 的缩放渲染有关，而不是溢出隐藏的错误。该元素实际上被隐藏在屏幕之外(请注意下面我一直滚动到右侧的位置，它仍然没有向我显示完整的 100% 宽度元素 - 其中 90% 实际上被隐藏了。

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

我假设您在 JSFiddle 中通过真实示例进行演示。如果您回到现实生活中的示例(除了 iframe 区域)，尝试将此元标记添加到头部(如果您还没有)，看看它是否有帮助:

<meta name="viewport" content="width=device-width, initial-scale=1">