从溢出 :hidden 转换时 iOS Safari 呈现错误
<p><p>我在这里创建了一个减少此错误的方法:<a href="http://codepen.io/benfrain/full/PZjpxr" rel="noreferrer noopener nofollow">http://codepen.io/benfrain/full/PZjpxr</a> </p>
<p>在 iOS Safari 中，当将元素从 overflow:hidden 包装器外部转换回其中时，该元素仅在转换完成时呈现。</p>
<pre><code>.wrapper {
height: 200px;
width: 200px;
overflow: hidden;
}
.item {
transition: transform 1s;
}
.toggled .item {
transform: translate3d(0, 300px, 0);
}
</code></pre>
<p>这在 iOS 9 上尤为明显，但在 iOS 9.2 上测试时，在运行 4 或 5 次转换后仍会发生这种情况。这也只是其中包含文本的元素的问题。右侧的空项(红色)正确过渡。</p>
<p>有谁知道不涉及使用 margin-top 来执行垂直移动的任何解决方法？ </p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p><strong>TLDR</strong>将<code>position:fixed</code>添加到 overflow hidden 的元素</p>
<p> <a href="https://codepen.io/chasebank/pen/YEzLez" rel="noreferrer noopener nofollow">https://codepen.io/chasebank/pen/YEzLez</a> </p>
<p>我一天中的大部分时间都在与此作斗争。很难研究 <code>overflow: hidden</code> 错误，因为每个与转换相关的问题在上千个不同的堆栈“溢出”帖子上都有一百个背面可见性“隐藏”答案。</p>
<p>但令人惊讶的是，这是我发现的唯一相关帖子。您认为这是一个众所周知且有据可查的问题吗？</p>
<p>我<strong><em>终于</em></strong>想起了一个类似的问题，当在头部使用某些视口(viewport)元标记时，一些移动浏览器会忽略 body 和 html 上的溢出。解决方案是有一个内部包装元素，并在其上设置溢出，但它还需要固定定位以完全解决问题。 (还是不知道为什么)</p>
<p>视口(viewport)元标记对此没有任何影响，但 <code>position: fixed</code> 会。它必须应用于将溢出设置为隐藏的任何元素，无论是直接父元素还是链上更高的元素。</p>
<p>这就解释了为什么很多人没有更多地遇到这种情况。例如，如果他们尝试转换侧边栏导航，他们会遇到前面提到的正文溢出问题，并且已经将父包装器设置为 <code>position:fixed</code> - 无意中也解决了这个问题.</p>
<p>请记住，如果您需要在内部元素上进行溢出/固定定位，它将从内容流中移除，这可能会导致其他问题。</p></p>
<p style="font-size: 20px;">关于从溢出 :hidden 转换时 iOS Safari 呈现错误，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/34726992/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/34726992/
</a>
</p>
页:
[1]