views:

424

answers:

3

When firefox (3.0.6) renders a png image at certain widths (e.g., 50%), a thin grey line is shown along the left and top edges of the content box. The line disappears at other widths (e.g., 70%). Furthermore, the line doesn't seem to be present in the original image (using gimp to inspect the image).

The phenomenon occurs in the absence of the CSS style markup -- in the HTML example below, the CSS is present to clarify where the grey lines are located -- it seems clear that the grey lines are appearing at the very edge of the content box itself.

I have a hard time imagining this is a bona fide firefox bug and am wondering what concept I'm overlooking or not grasping...

Thanks for your time and any suggestions/thoughts...

The images can be seen here http://datlisp.blogspot.com/2009/02/img-width-tag-and-firefox-rendering-of.html

html:

<html>
<head><title>problems with pngs</title></head>
<body>
<div style="border-color: red; border-width: thin; border-style: solid;
      padding: 2px">
<img src="http://imagebin.ca/img/ato4dM.png"
    width="50%"
    style="border-color: blue; border-width: thin; border-style: solid;
    padding: 2px;"/>    
</div>
</body></html>
A: 

Save your images as PNG-24. I have had similar issues with pixel distortion when trying to resize PNG-8 images dynamically in the browser.

Also, I'm not sure if this will work in your particular situation, but if possible you should resize the images before they are displayed to the browser. Relying on browser resizing leads to distortion and may increase bandwidth usage if you are trying to display very large images in a smaller format.

More information: http://graphicssoft.about.com/od/aboutgraphics/l/blresizehtml.htm

Mark Hurd
---------------------I still see the same effect (grey line appearing at 50% width but absent when the image is rendered at a higher width such as 80%) both with what imagemagick calls 'PNG32' and with what imagemagick calls 'PNG24'.
dat
+1  A: 

Using your demo page and image I wasn't able to see anything wrong.

Maybe it's problem with video drivers? I believe firefox (and cairo, the graphics library it uses) takes advantage of hardware acceleration to resize images smoothly, and unfortunately you can't disable it AFAIK.

Try logging in through a remote protocol to go around the video card and check it out. At least you can get some peace of mind. :)

Jorge Alves
The grey lines still show up when it's browsed over a tunnel to a sparc box. However, from the comments so far, it sounds like it's not a dumb-dumb issue with misunderstanding HTML or CSS... so probably not really a stack overflow item...
dat
It's a video driver issue: https://bugzilla.mozilla.org/show_bug.cgi?id=490997
dat
Hey, it was nice of you to remember. :)
Jorge Alves
A: 

I've had a similar problem with an image gallery I've been working on (sorry, can't link as I'm new). The thumbnail images are displayed actual size with no html/css resizing going on.

Sometimes they gain a 1 pixel wide line on the right and bottom between the image div and the drop shadow background. It took us a while to work out why it only happened sometimes but we narrowed it down to the Firefox zoom settings.

If you zoom the page in Firefox (ctrl and mousewheel, or ctrl and +/-) then just like in your case they appear at certain zoom levels. Resetting to 100% zoom (ctrl and 0) fixed it every time for us but doesn't help people that use the zoom feature.

Dan Brown