我在这里创建了这个bug的减少：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次转换后仍然会发生这种情况。这也只是其中包含文本的元素的问题。右侧的空项目（红色）转换正确。
有人知道任何不涉及使用页边空白进行垂直移动的解决方案吗？
TLDR将position: fixed添加到具有隐藏溢出的元素
https://codepen.io/chasebank/pen/YEzLez
我一天中大部分时间都在与之斗争。研究overflow: hidden错误是很困难的，因为每个与转换相关的问题在一千个不同的堆栈"溢出"帖子上都有一百个背面可见性的"隐藏"答案。
但令人惊讶的是，这是我发现的唯一相关的帖子。你会认为这是一个众所周知的、有据可查的问题吗？
我终于想起了一个类似的问题，当某些视口元标签在头部使用时，一些移动浏览器会忽略body和html上的溢出。解决方案是有一个内部包装器元素，并在上面设置溢出，但它也需要固定的位置来完全解决问题。（仍然不知道为什么）
视口元标记对此没有任何影响，但position: fixed有影响。它必须应用于溢出设置为隐藏的任何元素，无论是直接父元素还是链上更高的元素。
这就解释了为什么很多人没有更多地遇到这种情况。例如，如果他们试图转换侧边栏导航，他们可能会遇到前面提到的正文溢出问题，并且已经将父包装设置为position: fixed，这也无意中解决了这个问题。
请记住，如果您需要对内部元素进行溢出/固定定位，它将从内容流中删除，这可能会导致其他问题。
我不知道你是否仍在寻找答案，但你在.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上测试了它，它很有效。
更新：
根据评论，它似乎不起作用。但它适用于动画而不是过渡。唯一的缺点是在动画完成之前单击按钮（根据需要可以防止）。
http://codepen.io/Ostos/pen/EWVJqe
也许下面的答案可以解决这个问题：
问题CSS3规模转换和溢出：隐藏在Safari 上
如图所示，使用掩码图像或剪辑路径来替换溢出：隐藏