While updating the visual design of blinkbox.com a few months back we noticed something wasn’t right in IE7 – performance. No surprises really, IE 7 has been around a lot longer than many of the other browsers we currently support as our level 1 tier group.

The problem manifested itself mainly as a one second or more delay when hovering over images. Generally 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 checking the usual things such as incorrect binding of javascript events, possible html issues, CSS selectors run wild and so on. A search on Google yielded no usable results that helped either. Since nothing was improving the performance of the page so I started to get a bit more aggressive.

I removed all the images from the page and this worked, although that wasn’t really a solution. After carefully working through it turned out to be the backgrounds that we were using.

Now there was nothing really special about the backgrounds, just simple PNG images 1 pixel wide with repeat-x on them used to form a gradient. Standard stuff.

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

Technically they are all bundled together in one image and then positioned using CSS, but perhaps I’ll talk more about that system later. One of the options of the image bundling system that I developed was the ability to have the images split up and served independently – but that had no effect so I was able rule that out.

After realising that this was the issue I used the gradient generator to output wider images of around 20px, and voilà, performance issues sorted. So basically 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

CSS, IE7, Performance Hide