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.

Not happening on Chrome for Android – Yuriy Galanter Sep 23 '13 at 15:50 — Yuriy Galanter, Sep 23 '13 at 15:50
Yuriy - thanks for testing. Perhaps this is iOS specific. – andyuk Sep 24 '13 at 09:07 — andyuk, Sep 24 '13 at 09:07

score 1 · Accepted Answer · edited May 23 '17 at 12:11

1

See Android browser touch events stop display being updated inc. canvas/elements - How to work around? for similar problem.

Actually, dismissing only touchstart on the document (after animation is started) does the trick: http://jsfiddle.net/fBFkA/17/:

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

edited May 23 '17 at 12:11

Community

1
1

answered Sep 24 '13 at 11:08

YaaL

26
1

Is there a way to prevent user interaction pausing animations?

1 Answers1