Chrome requestAnimationFrame issues Chrome requestAnimationFrame issues google-chrome google-chrome

Chrome requestAnimationFrame issues


I think you have a problem because you call requestAnimationFrame(step); on every mousedown and mouseup event. Since your step() function also (as it should) calls requestAnimationFrame(step); you essentially start new "animation loop" for each mousedown and mouseup event and since you never stop them they do accumulate.

I can see that you also start "animation loop" at the end of your code. If you want to redraw immediately on mouse event you should move drawing out of step() function and call that directly from mouse event handlers.

Samething like this:

function redraw() {   // drawing logic}function onmousedown() {  // ...  redraw()}function onmouseup() {  // ...  redraw()}function step() {  redraw();  requestAnimationFrame(step);}requestAnimationFrame(step);


I created the animations for http://www.testufo.com and also a requestAnimationFrame() consistency checker at http://www.testufo.com/animation-time-graph

The list of web browsers that support automatic synchronization of requestAnimationFrame() to the computer monitor's refresh rate (even if other than 60Hz), is listed at http://www.testufo.com/browser.html ... This means on a 75Hz monitor, requestAnimationFrame() is now called 75 times per second on supported browsers, provided the web page is currently in the foreground, and CPU/graphics performance permits it.

Chrome 29 and 31 works fine, as does newer versions of Chrome 30. Fortunately, chrome 33 Canary seems to have more fully fixed the problem I see as far as I know. It runs animations much more smoothly, without unnecessary calls to requestAnimationFrame().

Also I have noticed power management (CPU slowdown/throttling too save battery power) can wreak havoc on the callback rate of requestAnimationFrame() ... It manifests itself as strange spikes upwards/downwards in Frame Rendering Times ( http://www.testufo.com/#test=animation-time-graph&measure=rendering )