requestAnimationFrame behaving weird with images moving while off screen

Question

I have a sliding pictures moving slowly along the screen. Once they move off the screen they rest back to back of the ribbon. So everything works fine when your on the web page but when you leave and one of images goes out of bounds. it gets of put back in the wrong place. I think it maybe something with requestAnimationFrame but I dont know what would cause this.

function tick(timePassed)
{
//dont worry about it
area.tick();
//updates the imgs X position
for (var i = 0; i < loadedImgs.length; i++)
{
    loadedImgs[i].x -= (timePassed * 10) / 1000;
    if (loadedImgs[i].x + loadedImgs[i].width <= 0)
    {
        loadedImgs[i].x = totalLength - loadedImgs[i].width;
    }
}
//updates there y position based on scroll wheel
dy -= dy * .1;
y += dy / 10;



}

buffer function

//buffer function
function update()
{

buffer.clearRect(0, 0, width, 600);
area.draw();//this has nothing to do with what going on
if (showAlert)//checks to see if a message is needed
{
    buffer.font = "30px monospace";
    var strings = alertMessage.split(" ");
    var charCount = 0;
    var line = 0;
    for(var i =0;i<strings.length;i++)
    {
        buffer.fillText(strings[i], (width / 5) + (charCount* letterSize), 300 + (line * 30));
        if (Math.floor(charCount/50) > 0)
        {
            line++;
            charCount = 0;
        }
        else
        {
            charCount += strings[i].length + 1;
        }

    }

}
else
{
    //paints all imgs
    for (var i = 0; i < loadedImgs.length; i++)
    {
        buffer.drawImage(loadedImgs[i].obj, loadedImgs[i].x, y);
    }
}
//dont worry about it
buffer.drawImage(area.canvas, (width / 2) - (area.width / 2), y + 1000);
//calls the render
render();

}

render function

    function render()
    {
          //paints to main canvas
          ctx.clearRect(0, 0, width, 600);
          ctx.drawImage(b, 0, 0);
    }

keeps time

function renderLoop(time)
{
    var timePassed = time - lastRender;
    if (timePassed < 33) { window.requestAnimationFrame(renderLoop); return; }
     window.requestAnimationFrame(renderLoop);
     lastRender = time;
     tick(timePassed);
     update();

  }

Answer 1

requestAnimationFrame will stop when its browser tab loses focus so when focus returns your time in renderLoop is much larger than you might expect.

This causes the renderLoop the assume a larger time has passed and is throwing off your repositionings.