我在这里创建了这个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 上
如图所示,使用掩码图像或剪辑路径来替换溢出:隐藏