滚动页面时在 iPad 上使用 CSS 过渡/翻译时出现故障

Question

我注意到，在使用硬件加速优化用于 iPad 的动画时，我似乎遇到了一个我无法完全解决的问题。如果您正在应用诸如翻译之类的 webkit 转换，尽管动画运行得很好，但如果在动画发生的中间用户滚动页面，当他们释放它会导致动画卡顿，从而恢复到其原始位置并尝试继续它的动画到它的终点。

我一直在到处寻找解决此问题的方法，在 iPad 商店也看到了它！如果您手头有 iPad 并导航到，例如：http://webkit.org/demos/transitions-and-transforms/，如果您选择一个项目，然后在按钮动画完成之前拖动页面（滚动）然后释放它，您将看到动画闪烁回到它的原始位置，然后重复直到完成。

我能够解决此问题的唯一方法是当 touchmove 事件发生时，我告诉动画只停留在其原始位置，这会阻止它尝试在释放时重复转换，即使尝试只是告诉它再次去哪里导致它无论如何都恢复（看到css转换在技术上似乎无法停止）。

有没有人找到任何解决这个问题的方法，我很确定这是 iPad 上的一个错误，而不是动画问题（这不涉及关于 preserve-3d 和你有什么问题），或者如果我应该将此作为问题报告。

谢谢！

Answer 1

不确定我是否在字里行间阅读，但我怀疑如果您使用 touchend 与 touchmove 或 touchstart 相比，您可能会看到更好的结果。