javascript - Is there a way to prevent user interaction pausing animations?

Question

I have an animation that runs on a webpage. As soon as I interact with the page on a touch device the animation stops. This does not happen on the desktop. I'm testing on Chrome and Safari on the iPad.

Is this a deliberate choice browser vendors have made? Is there any way around this?

You can test this by going to this JSFiddle page on a touch device.

This is the JavaScript I'm using:

var offset = 0;
var requestAnimationFrame = window.requestAnimationFrame ||
                                              window.mozRequestAnimationFrame ||
                                              window.webkitRequestAnimationFrame ||
                                              window.msRequestAnimationFrame;

$('.box').on('click', function() {
  animateWithAnimationFrame();
});

function animateWithAnimationFrame() {
  if (offset === 500)
    return;
  offset++;
  $('.box').attr('style', '-webkit-transform: translate3d(' + offset + 'px, 0, 0)');
  requestAnimationFrame(animateWithAnimationFrame);   
}

I also tried animation with setTimeout, but that makes no difference.

Thanks.

Answer 1

请参阅Android 浏览器触摸事件停止显示正在更新公司。画布/元素 - 如何解决？对于类似的问题。

实际上，仅关闭文档上的 touchstart（动画开始后）就可以了： http: //jsfiddle.net/fBFkA/17/：

function touchHandlerDummy(e) {
    return false;
}
document.addEventListener("touchstart", touchHandlerDummy, false);