Strange Chrome Things

I’m writing some javascript html5 canvas thingies and I’ve noticed some weirdness with chrome. Chrome beta channel 22.0.1221.0 to be all precise about it.

If you know what requestAnimationFrame is then great you can skip ahead a little bit. If you don’t, requestAnimationFrame is a function that takes a callback as it’s argument, it calls the callback when the browser is ready for the next frame. That means that the last frame has finished drawing and stuff.

You use it like this:

function loop() {
  // render stuff
  window.webkitRequestAnimationFrame(loop)
}
window.webkitRequestAnimationFrame(loop)

At it’s fastest, that loop function will get called every 16ms, or 60 times a second. 60fps.

If your function misses that 16ms window then Chrome seems to do some smart things to make the framerate consistent.

Except when it doesn’t.

I’ve got this silly little canvas pixel arty thing that draws on a 100 x 50 ‘buffer’ canvas that never gets shown, it then uses a scaling function to scale up the image on this canvas to whatever size I need and draw it directly onto the ‘output’ canvas. I needed to roll my own scaling function because, although there’s currently a property in the spec to disable image smoothing, Chrome always uses bilinear smoothing when you scale stuff, meaning the pixel art turns into a blurry mess.

I spent a while optimising the function and got my thing up to a solid 30fps. Not bad considering it started at 12fps with my first implementation.

Here’s an image from the Chrome dev tools of how this looks:

Not too bad, sometimes it misses, sometimes it clocks it a little under, and sometimes it’s spot on. Good enough for my purposes. Not sure about that big miss there, but those happen few and far between.

Here’s the problem. While developing I switched tab and came back, and saw that my fps counter went from flickering around 30fps to flickering around 40fps. What?

Here’s how this looks in the dev tools:

At least I know my fps counter is wrong and I didn’t somehow gain 10fps. Uneven frames.

It’s roughly 26ms then 64ms.

This is where my understanding breaks down. It’s doing the same thing as it was before, Frame even gets fired, this takes about 17ms, then we composite the layers and request a new frame.

Except sometimes we wait almost no time at all for that new frame event, and sometimes we wait upwards of 30ms.

w h y