965160 - Image rendering issue in firefox with css resizing

Status: RESOLVED WORKSFORME

(Core :: Graphics: ImageLib, defect)

Description

[Liam Sorsby]

Attachment: borderissue.jpg

User Agent: Mozilla/5.0 (Windows NT 5.1; rv:26.0) Gecko/20100101 Firefox/26.0 (Beta/Release)
Build ID: 20131205075310

Steps to reproduce:

We produced images at 456px × 368px with a small 2px border and applied a css resize of 240px on the width of the image which should automatically resize the height acordingly. We have a row around 40 images of the same width which run in lines of 3.


Actual results:

Every time we have a specific pattern emerge where the first row is fine then the second row, the border has been cut off. Then the next 2 are fine then the next row have the borders cut off, Then the next 2 are fine and the row after the same again and so on. Sometimes the issue occurs directly on the first row and then every 2 are fine ect.


Expected results:

The images should all be the same with the bottom of the images not cut off.

Comment 1

[Mats Palmgren (inactive)]

It appears the "border" is inside the image itself.  I don't think there are
any guarantees that it will be visible when scaling the image to a smaller
than natural size.  I would recommend removing the border from the images and
instead use CSS to add a border around them: "img { border:1px solid grey; }".

Comment 2

[Liam Sorsby]

(In reply to Mats Palmgren (:mats) from comment #1)
> It appears the "border" is inside the image itself.  I don't think there are
> any guarantees that it will be visible when scaling the image to a smaller
> than natural size.  I would recommend removing the border from the images and
> instead use CSS to add a border around them: "img { border:1px solid grey;
> }".

The image appears corretly in google chrome, internet explorer, safari and netscape. If it is possible in all browsers other then firefox surely this would be a bug?

Comment 3

[Timothy Nikkel (:tnikkel)]

240/456*368 = 193.684210526. So the height of the images is approximately 193 and two thirds of a pixel, so it's not surprising you see every third row differently. We are likely pixel snapping the edges of the images and every third row the partial pixels accumulate and we round the opposite way from the other two rows. You can read about the rationale for our image snapping here https://wiki.mozilla.org/Gecko:Image_Snapping_and_Rendering

You could try giving your images an integer pixel height as well, I think that should resolve things. So in addition to a width of 240 give them a height of 194 (for 456x368 images).

Comment 4

[Liam Sorsby]

(In reply to Timothy Nikkel (:tn) from comment #3)
> 240/456*368 = 193.684210526. So the height of the images is approximately
> 193 and two thirds of a pixel, so it's not surprising you see every third
> row differently. We are likely pixel snapping the edges of the images and
> every third row the partial pixels accumulate and we round the opposite way
> from the other two rows. You can read about the rationale for our image
> snapping here https://wiki.mozilla.org/Gecko:Image_Snapping_and_Rendering
> 
> You could try giving your images an integer pixel height as well, I think
> that should resolve things. So in addition to a width of 240 give them a
> height of 194 (for 456x368 images).

You right, I never tried this as right clicking on the image and then clicking view image showed that the image was still 194 but i assume the view image will take the individual image and make the division so 193.684210526 and round this up instead. I have applied this thoughout our site and will mark as resolved. However, I was under the impression that css should automatically round up per item rather then for the entire content. Thank you for your help though.

Comment 5

[Timothy Nikkel (:tnikkel)]

(In reply to Liam Sorsby from comment #4)
> site and will mark as resolved. However, I was under the impression that css
> should automatically round up per item rather then for the entire content.
> Thank you for your help though.

No, the boxes get subpixel positions/sizes. However when we draw them we snap the edges of images to integer pixels because it produces better results overall. However as you have seen there are some cases where the results can be a little bit puzzling.

Comment 6

[Liam Sorsby]

(In reply to Timothy Nikkel (:tn) from comment #5)
> (In reply to Liam Sorsby from comment #4)
> > site and will mark as resolved. However, I was under the impression that css
> > should automatically round up per item rather then for the entire content.
> > Thank you for your help though.
> 
> No, the boxes get subpixel positions/sizes. However when we draw them we
> snap the edges of images to integer pixels because it produces better
> results overall. However as you have seen there are some cases where the
> results can be a little bit puzzling.

Yes, unfortunately in our case, ours was one of the more puzzling results that occurred. However thank you for your help.

Comment 8

[gima+mozillabugzilla]

Hmm. My bug report (1022160) was marked as a duplicate of this bug, I'm not entirely sure, as:

My bug report specifies relative image size (%) and the image's RIGHT side and bottom side gets cut off. One pixel width seems to be rounded (snapped?) outside the calculated pixel width.

And the solution offered here appears to require specifying the image size in pixels. I cannot use pixels, I need the image size to be relative (% or rem) which, to my knownledge, is perfectly valid css.