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

 

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

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

这里是一个演示：http：//jsfiddle.net/mub5d/1。 打开移动Safari浏览器，你会看到什么是错的。

任何人都可以在Mac OS上查看safari 6，看看这个bug是否也存在？ 除了在我的元素周围创建另一个父项外，是否有人知道任何解决方法？

感谢您的反馈意见！

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

我在OSX Mountain Lion上运行它（10.8.2）

在这里输入图像描述

为了进一步回答你的问题，这种情况发生的原因可能与移动Safari的缩放渲染有关，而不是溢出隐藏的错误。 元素实际上隐藏在屏幕之外（注意下面我一直向右滚动到右边，但它仍然不会显示完整的100％宽度元素 - 其中90％实际上是隐藏的。

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

我假设你从JSFiddle中展示了一个真实生活的例子。 如果你回到你现实生活中的例子（除了iframe领域），如果你还没有它，请尝试添加这个meta标签，并看到它有助于：

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

在这里输入图像描述

这是iOS上的正常行为（仅适用于iOS）。 您可以通过声明overflow: hidden html和body元素来解决它。 另外，你应该把身体设置在position: relative 。

溢出行为

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

  • 视口的溢出取决于html元素的溢出设置。
  • 但只要您将html元素的溢出保留为其默认（ visible ），则正文的溢出设置也会应用于视口。 也就是说，您可以设置html或body overflow: hidden当您定位视口时overflow: hidden 。 到目前为止，身体元素本身的溢出行为不受影响。
  • 现在，如果将html元素的溢出设置为除visible之外的任何其他内容，则从body到viewport的传输不再发生。 在你的特定情况下，如果你将两个溢出设置为hidden ， html元素的设置将被应用到视口， body元素也会隐藏它的溢出。

    • 实际上，每个合理的现代浏览器都是这种情况，而不是特定于iOS。

    iOS的怪癖

    现在，iOS忽略overflow: hidden在视口上。 无论您在CSS中声明什么，浏览器都有权显示整个内容。 这是故意的，而不是一个错误，并继续在iOS 7和8的情况下。任何人都无法做到这一点 - 无法关闭。

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

    有了这些，大部分内容都是隐藏的。 但是仍然存在一个例外：绝对定位的元素。 他们的最终抵消父母是视口，而不是身体。 如果它们位于屏幕外的某个位置，则可以向右或向下移动至它们。 为了防止这种情况，您可以简单地将body元素设置为position: relative ，这使得它成为定位内容的父级偏移，并防止这些元素脱离正文框。

    回答代码

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

    所以身体需要设置为视口宽度和高度的100％。 （实现CSS的唯一方法的功劳归功于此答案。） html和body元素的边距必须为0，并且html一定不能有填充或边框。

    最后，为了处理身体填充，以及如果您想要在身体上设置边框，请使用box-sizing: border-box的数学工作box-sizing: border-box身体的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%;
}

    注意您可以根据自己的喜好设置身体填充和边框。

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

    链接地址: http://www.djcxy.com/p/89403.html

    上一篇: overflow:hidden on body is broken in ios6

    下一篇: Styling HTML and BODY selector to height: 100%; vs using 100vh