Safari 8和Chrome 43上的跳跃、断断续续的转换

Question

我已经遇到同样的问题好几个星期了，还没有找到答案。这就是我的问题:我必须制作一个动画，以便根据你的鼠标位置滚动图像。我使用transform: translate3d()，但我尝试了translate和translate2d，结果相同。

这个动画在Safari5/6/7和Firefox上运行得很好。在Chrome和Safari8上，它是跳跃的。事实上，这并不是一帆风顺的。

你们有什么想法吗？

非常感谢！

Answer 1

后来的webkit浏览器倾向于做3d变换而不是2d变换，所以你真的需要确保你的翻译是3d的。

如果您查看您的图像，您会发现它们包含内联样式，并将transform: translate()作为属性之一。内联样式正在覆盖您的CSS，包括transform: translate3d()，这就是为什么无论您在CSS中放置什么都没有区别的原因。

你需要做的是要么使用CSS (推荐)，要么使用内联样式--到处都是样式是杂乱无章的。