RequestAnimationFrame passes unexpected parameters in IE10

Question

So, I was a good pure citizen, using function detection, to find out if the browser supports requestAnimationFrame and only returns to a solution based on setTimeout otherwise (something around the lines Polish Irish famous post ).

 var NOW = Date.now || function () { return new Date.getTime(); }; var reqAnimFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || /* ... || */ function (callback) { setTimeout(function () { callback(NOW()); }, 1000 / 60); }; var previousTime = NOW(); function animStep(time) { var timePassed = time - previousTime; myCharacter.move(myCharacter.speed * timePassed); previousTime = time; reqAnimationFrame(animStep); } // start the animation reqAnimationFrame(animStep); 

This worked everywhere until Internet Explorer 10 appeared. In IE10, the passed parameter time has nothing to do with the current time, spinning the calculation of timePassed .

What's happening?

Answer 1

All (as far as I know) other browsers that implement requestAnimationFrame follow the specifications in (at the time of writing) the current Working draft :

Let the time be [redraw time], expressed in milliseconds from 1970-01-01T00: 00: 00Z.

What time represents just like your NOW() does.

IE10, however, follows the specifications in the current editor project:

Let time be the result of calling the now method in the performance interface in this context.

Which essentially means the number of milliseconds since the browser loaded this page (it also means that the measurement is more accurate since performance.now returns fractional milliseconds).

And so when you first calculate timePassed in IE10, you get something like negative 43 years.

Fortunately, since the value passed to the requestAnimationFrame return message has the same block anyway, just a different starting point, you can easily set it up.

There are three possibilities:

• You can simply throw away the very first step of the animation, using it only to set the previousTime , but do nothing.
• You can ignore the passed parameter and use NOW() (or performance.now ) each time, always having the same reference point.

• Or you can change the start of the animation to this:

   // start the animation reqAnimationFrame(function (t) { previousTime = t - (NOW() - previousTime); animStep(t); ); 

  This will lead to the correct calculus (including the first) of timePassed , regardless of which browser follows. And since it only changes the very first challenge, you also have no additional overhead in the long run.