Problems with repeating patterns in IE

Many sites use tiny images for patterns. Sometimes these are only one pixel images for a color, but usually it is for a pattern with a more subtle effect. These images can be anywhere from 2 pixels in total to 4 or 5 pixels square or larger. The trouble is that Internet Explorer has a hell of a time displaying these patterns whenever they cover a large area such as the background behind an article. IE simply fills the pattern in too slowly.

On a desktop with a respectable gaming graphics card and 2 GB of RAM there will be constant redraw with a Gif measuring 2 px by 2 px every time you scroll any amount. The choppy, stuttered scrolling makes text difficult to follow and leaves the site looking broken at best, and maybe even dangerous to some.

The simplest work around for single pixels of course is to use hex colors. There are a number of programs that can determine this value, my favorite being Color Detector. This great little freebie let's me find the value for any color currently displaying on my screen.

For larger patterns the solution is equally simple. Use fewer patterns or larger images. Unfortunately, images as large as 25px square will cause IE7 to choke ever so slightly. Anything greater than that is pretty safe.

About author

Reli4nt is a business manager and web developer and the JP behind The JPProject. He is a proverbial jack-of-all-trades-master-of-none, and an all around simple and down to earth kind of guy.