从溢出 :hidden 转换时 iOS Safari 呈现错误

我在这里创建了一个减少此错误的方法:http://codepen.io/benfrain/full/PZjpxr

在 iOS Safari 中，当将元素从 overflow:hidden 包装器外部转换回其中时，该元素仅在转换完成时呈现。

.wrapper {
  height: 200px;
  width: 200px;
  overflow: hidden;
}

.item {
  transition: transform 1s;
}

.toggled .item {
    transform: translate3d(0, 300px, 0);
}

这在 iOS 9 上尤为明显，但在 iOS 9.2 上测试时，在运行 4 或 5 次转换后仍会发生这种情况。这也只是其中包含文本的元素的问题。右侧的空项(红色)正确过渡。

有谁知道不涉及使用 margin-top 来执行垂直移动的任何解决方法？

---

Best Answer-推荐答案

TLDR将position:fixed添加到 overflow hidden 的元素

https://codepen.io/chasebank/pen/YEzLez

我一天中的大部分时间都在与此作斗争。很难研究 overflow: hidden 错误，因为每个与转换相关的问题在上千个不同的堆栈“溢出”帖子上都有一百个背面可见性“隐藏”答案。

但令人惊讶的是，这是我发现的唯一相关帖子。您认为这是一个众所周知且有据可查的问题吗？

我终于想起了一个类似的问题，当在头部使用某些视口(viewport)元标记时，一些移动浏览器会忽略 body 和 html 上的溢出。解决方案是有一个内部包装元素，并在其上设置溢出，但它还需要固定定位以完全解决问题。 (还是不知道为什么)

视口(viewport)元标记对此没有任何影响，但 position: fixed 会。它必须应用于将溢出设置为隐藏的任何元素，无论是直接父元素还是链上更高的元素。

这就解释了为什么很多人没有更多地遇到这种情况。例如，如果他们尝试转换侧边栏导航，他们会遇到前面提到的正文溢出问题，并且已经将父包装器设置为 position:fixed - 无意中也解决了这个问题.

请记住，如果您需要在内部元素上进行溢出/固定定位，它将从内容流中移除，这可能会导致其他问题。

关于从溢出 :hidden 转换时 iOS Safari 呈现错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34726992/