Mozilla makes images fuzzy

But cure found!

[Hester]

This one is crazy. I've been applying a background image to a page using stripes. Each stripe is 3 pixels deep. There are two alternating colours. The image is applied horizontally only, and repeated.

I noticed that the lines were blurred in Mozilla. Yet in Opera and IE they were pin sharp! I took a screenshot but the effect could not be seen in the screenshot.

I even turned off ClearType font smoothing in Windows. Then I tried saving my striped image in a variety of formats, namely jpg and gif, trying out all the save options possible.

Eventually I solved the problem. I had noticed the lines were pin sharp in another image I had positioned over the background, but with the lines at a different place. So here is the solution I made:

html {margin-top:1px;}

This forces Mozilla to move the image down by just 1 pixel, curing the strange fuzzying effect!

Of course I have a layout that this doesn't matter in. I could have just edited the background image, but it has to line up with another image I'm using. (I think I'll redo both images though. Sigh.)

Has anyone else come across this one? If not I'd better file it on Bugzilla!

[Hester]

Aaagh! I redid the image to be 1px taller. Now the fuzziness appears in Opera and IE! Clearly it's a Windows problem. I'm on XP SP1.

How are designers supposed to work with crazy effects like these happening? (And no I haven't been drinking! :))

[Update: I see that moving the browser window up or down slightly causes the effect to appear and disappear. Most odd. So now it definitely affects all browsers. I'll try and get it not to happen when the browsers are maximised.]

[tedster]

This might also be an issue with your graphics card, Hester -- can you check it on other computers?

Designers quickly discover the limits of the online medium, and there are many. It just ain't print, and print has its own limitations. And have you noticed the problems with normal definition TV graphics?

[edited by: tedster at 10:42 pm (utc) on Mar. 7, 2004]

[webjefe]

Are you using the web-safe palette for your colors?

Is your display setting set for 256 colors, High Color (16-bit, thousands of colors), or True Color (24-bit and 32-bit, millions of colors)? Only True Color can display all 16.7 million colors without dithering or color shifting.

Also, I believe that less than 60 percent of web users currently are using True Color. So designing your page for the other 40+ percent is important.

[choster]

Gecko has some known issues with rounding at very small units (e.g. 1px):

[positioniseverything.net...]

[Hester]

I think it could be my TFT monitor. I read that when the digital lead is used, you don't quite get all 16 million colours.

The stripes can't be saved in a web-safe palette because they fade away gradually, so many colours are needed.

I wish I could point you to a test-case, but links like that aren't allowed!

I will try and check it on a CRT monitor to see if the same effect occurs.