溢出：在ios6中隐藏在身体上

Question

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

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

以下是演示：http://jsfiddle.net/mUB5d/1。在Mobile safari中打开它，你会发现错误。

有没有人可以看看Mac OS上的safari 6，看看那里是否还有bug？ 除了在我的元素周围创建另一个父级之外，有没有人知道任何解决方法？

感谢您的反馈！

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">

Answer 2

这是iOS（仅限iOS）上的正常行为。您可以通过在overflow: hidden和html元素上声明body来解决此问题。此外，您应将正文设置为position: relative。

溢出行为

这里有几件事情在发挥作用。要理解修复工作的原因，我们首先需要了解如何设置视口的溢出。

• 视口的溢出由html元素的溢出设置决定。
• 但只要您将html元素的溢出保留为默认值（visible），主体的溢出设置也会应用于视口。即，当您定位视口时，可以将html或body设置为overflow: hidden。到目前为止，身体元素本身的溢出行为不受影响。
• 现在，如果您将html元素的溢出设置为visible以外的任何内容，则不会再发生从body到视口的转移。在您的特定情况下，如果您将两个溢出设置为hidden，则html元素的设置将应用于视口，body元素也会隐藏其溢出。

在每个合理的现代浏览器中实际情况都是如此，而不是特定于iOS。

iOS怪癖

现在，iOS会忽略视口上的overflow: hidden。无论您在CSS中声明什么，浏览器都保留整体显示内容的权利。这是故意的，而不是一个错误，并且在iOS 7和8中仍然如此。任何人都无法做到这一点 - 它也无法关闭。

但你可以通过使body元素本身而不是视口隐藏它的溢出来解决它。要实现这一目标，您必须先将html元素的溢出设置为除visible以外的任何内容，例如到auto或hidden（在iOS中，两者之间没有区别）。这样，当您将身体溢出设置设置为overflow: hidden时，身体溢出设置不会转移到视口并实际粘贴到body元素。

有了这个，大多数内容都被隐藏了。但仍有一个例外：绝对定位的元素。他们最终的偏移父母是视口，而不是身体。如果它们位于屏幕之外，右侧或底部的某个位置，您仍然可以滚动到它们。为了防范这种情况，您可以简单地将body元素设置为position: relative，这使其成为定位内容的偏移父元素，并防止这些元素突破正文框。

回答代码

最后需要注意的是：身体本身不得大于视口。

因此需要将body设置为视口宽度和高度的100％。 （仅用于实现目标的CSS的功能归功于this SO answer。）html和body元素的边距必须为0，html必须不也有填充或边框。

最后，为了处理身体填充，如果您想在身体上设置边框，请使用box-sizing: border-box对身体进行数学运算。

所以这里。

html {
  overflow: hidden;

  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
}

body {
  overflow: hidden;
  position: relative;

  box-sizing: border-box;
  margin: 0;
  height: 100%;
}

注意您可以根据需要设置身体填充和边框。

Answer 3

经过一段时间的努力，我发现html和body标签都需要隐藏溢出才能真正隐藏溢出的内容。在body内的元素溢出隐藏工作正常，所以我们选择的是额外的css规则或包装元素。

Answer 4

对我来说它有效

I have implemented in the left side menu

if($('.left-menu-panel').is(':visible')) {$("body").addClass('left-menu-open');$("html").css('overflow-y','hidden'); $('body').click(function() {$("body").removeClass("left-menu-open") ;$("html").css('overflow-y','visible'); });$('#off-canvas-left').click(function(event){event.stopPropagation();}); }