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.
Comments
Post a Comment