iPad CSS3 webkit转换和触摸事件 - 一个轻微的无法解释的口吃

Question

这与图片库有关，因此当您“滑动”时，图像会从屏幕上加载和卸载，但中心图像始终会流畅地显示。

这是从此处描述的滑动视图库派生的代码：http://cubiq.org/swipeview

问题在于，在javascript在触摸结束事件中设置webkitTransform，以及元素实际开始在屏幕上设置动画时，会出现100-200ms的延迟。

这种有问题的延迟只是间歇性地发生;似乎它在大约15-20张幻灯片被卸载/装载后开始一直发生。

在触摸移动事件中，有如下代码：

element.style.webkitTransitionDuration = 0
element.style.webkitTransform = "translate3d( etc. ) "

这个功能非常快，因此如果您在ipad上移动手指，该元素会精确地“跟踪”您的手指。

在触摸结束事件中，有如下代码：

element.style.webkitTransitionDuration = '<some_number>ms';
element.style.webkitTransform = "translate3d( etc. ) "

触摸结束事件就是问题所在。触摸结束事件本身会在手指从ipad中移除时触发，但是，当问题发生时，css更新不会触发屏幕上的实际动画，直到上述问题延迟之后。

Answer 1

这是一个棘手的问题。我终于找到了罪魁祸首。在我的touchend事件监听器中，我正在调用一个向DOM元素添加类的函数。这导致Safari花费一些时间将纹理重新连接到GPU，从而导致口吃。删除那些直接的className更新使得所有的黄油再次平滑（我仍然使用requestAnimationFrame而不是CSS转换）。

我将className更改移动到一个单独的事件，该事件从touchend触发，但它不会导致任何性能问题。所以，如果你必须设置类，就不要直接在touchend回调中进行。改为触发另一个事件或在requestAnimationFrame中设置类。