13

Paul Irish has a post called requestAnimationFrame for Smart Animating. Now Paul is a smart guy - and I'm just trying to understand the scope of the application of this idea.

He says to do HTML5 animation - you should use a requestAnimationFrame shim like this:

// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame    ||
      function( callback ){
        window.setTimeout(callback, 1000 / 60);
      };
})();


// usage:
// instead of setInterval(render, 16) ....

(function animloop(){
  requestAnimFrame(animloop);
  render();
})();
// place the rAF *before* the render() to assure as close to
// 60fps with the setTimeout fallback.

Which is understandable. We can apply this in a JSFiddle like this and the results are quite good.

But if I rip out the shim layer function, then in Chrome 31 and Firefox 24 it works fine.

So if I look at the compatibility for the RequestAnimationFrame function - it looks like browsers have had this function for a very long time.

My question is - For which browsers are we using Paul Irish's requestAnimationFrame shim? You can rip it out and it still works, and it looks like browsers have had it for a long time.

hawkeye
  • 34,745
  • 30
  • 150
  • 304
  • 2
    For exactly the ones in the list you just linked to. In particular, for IE9. – SLaks Jan 17 '14 at 03:36
  • Never use presented shim. It just delays execution for 1000/60. Sole purpose of raf is to avoid excessive dom updates. Better use real raf polyfill which schedules callback for next-frame execution. – Miloš Đakonović Oct 30 '16 at 08:26

2 Answers2

19

You need the polyfill for IE8, IE9, Android Browser, and a bunch of older stuff you'd have to make a judgement call on.

Here's the current support for rAF thanks to caniuse.com:

enter image description here

Anything with a yellow flag in the corner uses a prefix so it needs the shim. Anything red needs the setTimeout fallback.

But, to get at your core point... soon, yes, soon, the polyfill will be much smaller. And hopefully not too long from now we can kill it and use rAF directly.

Paul Irish
  • 47,354
  • 22
  • 98
  • 132
6

I'm afraid the polyfill/shim will be necessary if you want to support older browsers.

As you point out, it works with latest Firefox and Chrome without prefix. Firefox has also a new policy not to prefix any future technology so that's perhaps a good thing too and there is a proposal to do the same for Chrome.

But if you run older browsers (and a surprisingly large group of users do) the polyfill is necessary.

Graph

Source

Here we see IE9 on top followed by IE8, 10 and then older Chrome versions (although this includes the whole last year which explains the Chrome part and also IE9 vs. IE10). Variations may apply to regions so test out the geographic area where you think your application is relevant.