javascript - Canvas animation flickering under Firefox -

no matter do, can't fluent canvas animation under firefox. set simple test code absolutely nothing except calling empty draw function every 1/40 s , it's still flickering.

var t = 0; function draw(time) {   console.log(math.round(time - t));   t = time; }  setinterval(function(){ requestanimationframe(draw); }, 25); 

delay between frames under firefox jumps on 150 ms noticable human eye. same thing happens when using simple setinterval call draw(), without requestanimationframe. runs under chrome , opera.

i've tried getting rid of setinterval, results same:

var t = 0; function draw(time) {   requestanimationframe(draw);   console.log(math.round(time - t));   t = time; } draw(); 

is known issue? there way work around it?

turns out current implementation of requestanimationframe under firefox terrible , fails provide smooth animation when called timers or network events (even repeated @ constant interval).

this makes hard redraw canvas when state updated on websocket connection. way smooth animation calling requestanimationframe immediately:

(function draw() {    requestanimationframe(draw);    // })(); 

when using method, it's quite idea implement kind of frame interpolation, draw() calls won't synchronized network events.