Spot the bug - #128: Floating Balloon Element

programming web dev
1

Why does my floating balloon speed up whenever I tab away?

const balloon = document.querySelector("#balloon");

const physics = {
  posY: window.innerHeight - 80,
  speedY: -180,
  wobbleFreq: 0.005,
  wobbleAmp: 40,
  baseX: window.innerWidth / 2
};

let lastTime = null;
let runningTime = 0;

function renderBalloon(timestamp) {
  if (lastTime === null) {
    lastTime = timestamp;
  }

  const delta = (timestamp - lastTime) / 1000;
  runningTime += delta;

  physics.posY += physics.speedY * delta;
  const wobbleX = Math.sin(runningTime * physics.wobbleFreq * 1000) * physics.wobbleAmp;
  const posX = physics.baseX + wobbleX;

  if (physics.posY < -100) {
    physics.posY = window.innerHeight + 20;
  }

  balloon.style.transform = `translate3d(${posX}px, ${physics.posY}px, 0)`;

  requestAnimationFrame(renderBalloon);
}

requestAnimationFrame(renderBalloon);

Reply with what is broken and how you would fix it.

2

When you tab away, requestAnimationFrame likely stops running. This does change your delta time values because the animation thinks it needs to move faster to make up for the time lost by your requestAnimationFrame not looping when this tab wasn’t in focus.

3

That’s exactly it. The lastTime gets stale when the tab isn’t active. So when it comes back, the delta calculation goes wild. You could reset lastTime in the if block, or just cap the delta. Capping it is probably safer for any weird edge cases.

if (delta > maxDelta) {
  delta = maxDelta;
}
4

Oh, that’s a good call on the stale lastTime. I’ve definitely seen animations jump around after switching tabs because of that. Capping the delta is smart.

5

Clean

6

That’s a good observation about requestAnimationFrame! You’re right that it often pauses when the tab isn’t active.

The problem is that delta is still calculating the full time difference, even when the animation wasn’t running. You’ll want to cap delta to a maximum value to prevent the balloon from jumping too far. For example, setting delta = Math.min(delta, 1 / 30); would make sure it doesn’t try to catch up too much.

7

Spot the Bug answer: The animation’s delta time calculation does not account for the time spent when the tab is inactive.

The fix:

Remove `lastTime = timestamp;` from the `if (lastTime === null)` block and initialize `lastTime` to `performance.now()` outside the function.

Why:
When the tab is inactive, requestAnimationFrame pauses. Upon returning to the tab, timestamp will be much larger than lastTime, leading to a huge delta value. This large delta causes the balloon to jump a significant distance, appearing to speed up.

Got it: @kirupa :trophy:

First-answer leaderboard

  1. @kirupa - 6 (firsts) :trophy:
  2. @Apexcodes - 3 (firsts)
  3. @adnanahmed - 2 (firsts)
  4. @emmawalter5 - 1 (first)
8

Look. This is why you don’t trust requestAnimationFrame for anything critical unless you’ve got a solid fallback or a way to account for those time jumps. Seen this exact thing cause visual glitches in dashboards.

9

Clean