溢出:在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的缩放渲染有关,而不是溢出隐藏的bug.该元素实际上是隐藏在屏幕之外(注意下面我一直向右滚动,它仍然没有显示完整的100%宽度元素 - 其中90%实际上是隐藏的.

它可能与iframe和页面缩放有关.尽管如此仍然看起来像一个bug.

我假设你是从一个真实的例子中在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,例如to auto或hidden(在iOS中,两者之间没有区别).这样,身体溢出设置不会传递到视口,并且在您将其设置为实际时会粘贴到body元素overflow: hidden.

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

回答代码

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

因此,需要将主体设置为视口宽度和高度的100%.(实现它的唯一方法的功劳归功于这个SO答案.)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%;
}

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