Brad Rees

While updating the visual design of blinkbox.com a few months back we noticed something wasn’t right in IE7 – the performance was terrible. IE 7 has been around a lot longer than many of the other browsers we currently support in our level 1 tier, and is starting to show its signs of age.

The problem manifested itself mainly as a one second or more delay when hovering over images. Typically this would be a trivial operation for a browser, as it was simply applying the :hover classes for the element.

A bug was raised and I started the investigation by checking the usual culprits, such as incorrect binding of javascript events, HTML issues, CSS selectors that had run wild, and so on. A search on Google yielded no usable results that helped, either. Since none of these had improved the performance of the page, I started to get a bit more aggressive with my bug hunting.

I removed all the images from the page and this worked, although that wasn’t a solution that we could use. After carefully working through it, it turned out to be an issue with only the background images that we were using.

Now there was nothing really special about the background images, just simple PNGs, 1 pixel wide with repeat-x on them, which are then used to form a gradient. Standard stuff for a web page.

Notice the hover state on the Fast and Furious icon - that was where it was most noticable.

Technically, all of our gradients are bundled together into one image and then positioned using CSS, so I checked to see if that was the cause of the problem. One of the options of our image bundling system is the ability to have the images split up and served as separate files. After giving that a go it was apparent that it had no effect.

My next thought was that perhaps the number of repeating images were to blame. I made a quick check by disabling the repeat-x, and the site started running like normal. Realising that this was the issue I used the gradient generator to output wider images (20px), and voilà, the performance issues were sorted for good. So, if you are going to use a lot of gradients, and would like to keep your site running smoothly, then make sure they are more than 1px wide, as IE7 just can’t handle it.

*Of note blinkbox.com uses over 4ooo pixels of vertical gradients site wide, so this might be an extreme case