Friday, November 15, 2013

requestAnimationFrame will not fire on Mobile Safari if you are already doing too much work in a touch handler

I've lately been writing a whole bunch of front-end stuff for iOS at Brightside. One of the recurring themes is responding smoothly to touch input, with appropriate incremental rendering of the page. At one point I tried to use requestAnimationFrame to offload some of the re-rendering work from a touch handler (that was already doing some work) but that totally didn't work - the frames were not firing for long periods of time.

I've put together a simple demo to show the effect at The gist is that the touchmove handler is using (by default) 100ms for some work and then setting a timer. The demo uses both setTimeout with a wait of 0 and (request|webkitRequest)AnimationFrame and shows how long it takes for the request to fire. The animation frames pretty much don't come at all as long as you keep moving your finger.

This doesn't happen with mouse events on the desktop in either Chrome or Safari.