在 iPad 上使用 CSS 转换/翻译时滚动页面时出现故障
我注意到，在使用硬件加速优化 iPad 上使用的动画时，我似乎遇到了一个尚未完全解决的问题。如果您正在应用 webkit 转换（例如翻译），尽管动画运行得很好，但如果在动画发生的过程中用户滚动页面，当他们释放它时，会导致动画断断续续，从而恢复到其原始位置并尝试继续它的动画到它的终点。
我一直在到处寻找这个问题的解决方案，在 iPad 商店中也看到了这个问题！例如，如果您手头有 iPad 并且导航至：http://webkit.org /demos/transitions-and-transforms/ ，如果您选择一个项目，然后在按钮动画完成之前拖动页面（滚动）然后释放它，您将看到动画闪烁回到其原始位置，然后重复直到完成。
我能够解决此问题的唯一方法是当发生 touchmove 事件时，我告诉动画仅停留在其原始位置，这会阻止它尝试在释放时重复过渡，甚至尝试只是告诉它再次去哪里导致它无论如何都会恢复（看看 css 转换在技术上似乎无法停止）。
有没有人找到这个问题的任何解决方法，我很确定这是iPad上的一个错误，而不是动画的问题（这不涉及保留3d和你有什么问题），或者我是否应该报告这是一个问题。
谢谢！
I've noticed whilst optimising animations for use on iPad using hardware acceleration, I seem to be coming across an issue that I haven't fully been able to resolve. If you are applying webkit transforms such as translate, although the animation runs great, if in the middle of an animation occuring the user scrolls the page, when they release it causes the animation to stutter whereby it reverts to its original position and attempts to continue its animation to it's end point.
I've been looking everywhere for resolve on this issue, having seen it occur on the iPad store as well! If you have an iPad at hand and you navigate to, for example: http://webkit.org/demos/transitions-and-transforms/ , if you select an item then before the button animation has completed drag the page(scroll) then release it, you will see the animation flicker back to its original position and then repeat until its complete.
The only way I've been able to work around this is when a touchmove event occurs, I tell the animation to just stay where at its original location, which stops it from trying to repeat the transition on release, as even attempts to just tell it where to go again cause it to revert regardless (seeing as how css transitions seem not technically able to be stopped).
Has anyone found any workarounds to this issue, I'm pretty sure this is a bug on iPad as opposed to a problem with the animation (this does not involve issues regarding preserve-3d and what have you), or if I should be reporting this as an issue.
Thanks!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
不确定我是否在字里行间阅读，但我怀疑如果您使用 touchend 而不是 touchmove 或 touchstart，您可能会看到更好的结果。
Not sure if I'm reading between the lines, but I suspect you might see better results if you use touchend versus touchmove or touchstart.