从溢出转换时 iOS Safari 呈现错误：隐藏答案

【问题标题】：iOS Safari rendering bug when transitioning from overflow:hidden从溢出转换时 iOS Safari 呈现错误：隐藏
【发布时间】：2020-11-06 18:06:22
【问题描述】：

我在这里创建了一个减少此错误的方法：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 执行垂直移动的任何解决方法？

【问题讨论】：

Safari 是否还需要 -webkit- 前缀，也许？
我不这么认为，因为将 div 向下发送的过渡效果很好。我会将它们添加到笔中以排除这种情况。
你试过在.item 上使用-webkit-transform-style: preserve-3d; 吗？另外我会尝试包括每个属性的-webkit- 变体。
感谢您的想法，我以前不知道该属性。不幸的是，它只会使空 div 转换与导致问题的带有文本的转换一样糟糕。
也许下面的答案可以解决你的问题：stackoverflow.com/questions/21087979/…

标签： ios css overflow css-transitions

【解决方案1】：

TLDR将position: fixed添加到隐藏溢出的元素

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

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

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

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

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

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

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

【讨论】：

【解决方案2】：

我不知道您是否仍在为此寻找答案，但您在 .testIem 和 .goThing 类中都缺少 will-change 样式。

.testItem {
  will-change: transform;
  width: 50%;
  height: 300px;
  background-color: #f90;
  transform: none;
  transition: transform 2s;
  .goThing & {
    transform: translate3d(0, 500px, 0);
    will-change: auto;
  }
}

我以为您只需要 .testItem 类，但似乎您还需要 .goThing 类才能使其在 iOS 中正常工作。我不确定为什么。我在装有 iOS 9.2 的 iPad Pro 上对其进行了测试，它可以正常工作。

更新：

基于 cmets，它似乎不起作用。但它适用于动画而不是过渡。唯一的缺点是在动画完成之前单击按钮（可以根据您的需要阻止）。

http://codepen.io/Ostos/pen/EWVJqe

【讨论】：

此解决方案似乎不适用于 iOS Safari。在带有 iOS v10 的 iPhone 6 和带有 iOS v9 的 BrowserStack 上进行了测试。 codepen.io/alexroper/full/PpPqjm
@alexroper 我更新了我的答案。你是对的。当我在 6 个月前对其进行测试时，它可以工作……但是如果您使用动画而不是过渡，它就可以工作。更复杂，但它有效。
是的，我在回答中提到了这一点。这取决于您的需求。您可以删除单击侦听器并在动画结束时重新添加它，或者只需添加另一个随 animationend 事件更改的标志。如果您绝对需要在动画结束之前再次单击，那么这不是最佳答案。
哦，当然。使用 javascript 对其进行动画处理是另一种选择。但这对于一件简单的事情来说太复杂了。在我看来。
哦，抱歉，我没有看到您的回答中提到的那条注释。我将删除我对关键帧动画的评论。

【解决方案3】：

也许下面的答案可以解决这个问题：

Probleme CSS3 scale transform and overflow:hidden on Safari

如图所示，使用 mask-image 或 clip-path 替换 overflow:hidden

【讨论】：