Tearing and flickering when swapping img src in Firefox

On a recent project I encountered a problem in firefox that was causing the body background colour to flicker through the full screen image that I was updating.

I was rapidly updating the image src that was filling the screen, but in firefox and to some extent IE, quite often on slower machines we would see the body background either flash over the entire screen or the lower half.

This would even occur if the images were not set to full screen, and would occur if image.onload was used to preload the image first before changing the src attribute on the visible image. It seemed like firefox was rendering the image to the screen before it had downloaded, as if the onload event was firing early.

That doesn't appear to be the cause though. As best I can guess the issue seems to be caused by computations firefox needs to do to scale up the image to fullscreen as we required.

The fix was to set all of the images we preloaded to being 100% width & height along with a fixed position, similar to how the visible image appeared. With one exception being that the visiblity of the preloaded images was set to hidden.

The result being that I think firefox pre-computes everything it needs as the images are being preloaded and has all of the information it needs to display the images quickly when they're requested later.

The key take away being that if you're having problems with firefox flickering, it's not enough that you're preloading the images over the network you need to also preload style computations for the images. Be sure that you're applying the same styles to the preloading images as the display images.