Question

我已在此处创建了此错误的减少：http://codepen.io/benfrain/full/PZjpxr

在iOS Safari中，当从溢出：隐藏包装器外部转换元素时，该元素仅在转换完成时呈现。

.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执行垂直移动的变通办法？

Answer 1

TLDR 将My.Settings.Item("ConnectionString") = "Something"添加到隐藏溢出的元素

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

花了我一整天的时间来对抗这一切。研究position: fixed错误很困难，因为每个与转换相关的问题都有一百个背面可见性＆＃34;隐藏＆＃34;一千个不同的堆栈上的答案＆＃34;溢出＆＃34;讯息。

但令人惊讶的是，这是我发现的唯一相关帖子。您认为这将是一个众所周知且记录良好的问题吗？

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

视口元标记对此没有任何影响，但overflow: hidden会对此产生影响。它必须应用于溢出设置为隐藏的任何元素，无论它是直接父级还是链上方的某些东西。

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

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

Answer 2

我不知道您是否还在为此寻找答案，但您在.testIem和.goThing课程中都缺少改变意愿的风格。

.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专业版中进行了测试，并且可以正常使用。

更新：

根据评论，它似乎没有用。但它适用于动画而不是过渡。唯一的缺点是在动画结束前单击按钮（可以根据您的需要进行预防）。

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

Answer 3

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

Probleme CSS3 scale transform and overflow:hidden on Safari

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

从overflow：hidden转换时的iOS Safari渲染错误

3 个答案: