Yesterday, I encountered first-hand an nerve-wrecking issue that has plagued a fellow worker’s PC. Everytime he loaded a page from the CCE LTER website, the browser would slowly redraw the entire background before displaying the rest of the page.

This occured on a rather fast machine, and only with Internet Explorer 6. Firefox on this machine worked fine. Other PCs worked fine (with both browsers). Macs worked fine (with Safari and Firefox). This issue seemed to be isolated to this one particular machine.

To work-around this issue, I resized the repeating background image from 1×4 px dimension to a 50×200 px dimension. This greatly reduces the amount of processing the browser does in drawing the repeating background image (by a factor of 2500 times) while very slightly increasing the image file size. This seemed to “fix” the slow redrawing issue.

Inspiration for this idea came from here: Tiny gifs: not a good idea.

Some important notes:
- I never technically fixed anything. I still have no idea why IE 6 on this machine rendered the page poorly, while other machines (some slower and older) showed no problems at all.
- I additionally noticed that IE6 on this particular machine rendered images very poorly. Jpegs appeared pixelated, etc. Firefox rendered images fine, as well as IE6 on other PCs (in our lab).
- It was important to see and experience the problem first-hand. Otherwise it would have been virtually impossible to diagnose the issue and find a solution or work-around. In other words, for this particular issue, it was extremely helpful to see the problem on this user’s PC.
- I made the same changes for the Palmer LTER website and also this site, both which employ the same design pattern of a repeating tiled-background.
- The Yahoo! User Interface Blog uses a 1px repeating background. Check it out and see how fast (or slow) your browser draws the background…. especially if you’re running IE6/Win.