Take the 2-minute tour ×

I started developing my first Chrome extension, but I'm stuck with a problem at the end. Basically, at some point the extension opens up a popup where a preview of an animation is displayed. For the animation, the classic requestAnimationFrame and the canvas element are used. When the window of the popup is still visible but is not the current one, the framerate stays at an average of 60fps.

However I soon realized that when the window is the current one, the framerate of the animation drops down to approximately 30 fps. My animation code being based on Date.now(), it does not affect the duration of the animation, but it's still a major issue.

EDIT : actually it does affect the duration, which makes it even weirder. If everything is related to Date.now(), shouldn't it stay the same?

After a minute or so, the framerate slowly goes back to normal (~60fps).

Does anyone have any idea from where this problem comes from? Is there any solution to fix this?

Here is the part of the code that handles the animation:

var cvs = document.getElementById('preview');
var ctx = cvs.getContext('2d');

var playing = true;
var timer = 0, last, now, delta;
var current = 0;

function loop() {

    if(!playing) return;

    now = Date.now();
    timer += (now - last);
    last = now;

    if (timer > delays[current]) {
        timer = timer % delays[current];
        if (current > frames.length - 1) {
            current = 0;

    ctx.clearRect(0, 0, cvs.width, cvs.height);
    ctx.drawImage(frames[current], 0, 0);
    ctx.fillStyle = '#fff';
    ctx.fillText(~~((now - start) / 1000), 0, 20);

(frames contains all the images, and delays contains all their respective duration)
Pretty basic, I don't think this is where the framerate problem comes from…

share|improve this question

Your Answer



Browse other questions tagged or ask your own question.