Comment 11 for bug 274575

User-Agent: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.10) Gecko/2009042315 Firefox/3.0.10
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.10) Gecko/2009042315 Firefox/3.0.10

Image scaling in firefox exhibits line artifacts with certain images at certain scaling values. A screenshot is at http://datlisp.blogspot.com/2009/05/firefox-image-scaling-and-line.html

In this example, two images are each rendered at three different width values: 100%, 70%, and 50%. The second pink bar image, with a black smudge in the upper left corner exhibits grey lines at the left and top borders of the image when scaled to 50%. This doesn't seem to be ideal scaling behavior.

What next steps should I take? Stuff I have/haven't tried:
- haven't been able to try this on a windows box so am unable to tell if it's some sort of X windows-related issue
- tried it running firefox remotely on a sparc box and the same lines show up
- the grey lines don't appear when the page is viewed with opera
- tried jpeg, gif, png - same artifact occurs in each case

Reproducible: Always

Steps to Reproduce:
1. test XHTML below
2. test images are at http://dathomp1.googlepages.com/

<h:html xmlns:h="http://www.w3.org/1999/xhtml">

<h:body>
<h:div>100%:
  <h:img src="./short2-full.jpeg"
     width="100%"
     style="border-color: blue; border-width: thin; border-style: solid;
        padding: 2px;" />
</h:div>

<h:div>70%:
  <h:img src="./short2-full.jpeg"
     width="70%"
     style="border-color: blue; border-width: thin; border-style: solid;
        padding: 2px;" />
</h:div>

<h:div>50%:
 <h:img src="./short2-full.jpeg"
    width="50%"
    style="border-color: blue; border-width: thin; border-style: solid;
           padding: 2px;" />
</h:div>

<h:div>100%:
 <h:img src="./short3-full.jpeg"
    width="100%"
    style="border-color: blue; border-width: thin; border-style: solid;
           padding: 2px;" />
</h:div>

<h:div>70%:
 <h:img src="./short3-full.jpeg"
    width="70%"
    style="border-color: blue; border-width: thin; border-style: solid;
           padding: 2px;" />
</h:div>

<h:div>50%:
 <h:img src="./short3-full.jpeg"
    width="50%"
    style="border-color: blue; border-width: thin; border-style: solid;
           padding: 2px;" />
</h:div>

</h:body></h:html>