Downscaling an image results in noticeable stretching after image is shown




5 years ago
4 years ago


(Reporter: elias.lousseief, Unassigned)


26 Branch
Windows 7

Firefox Tracking Flags

(Not tracked)




5 years ago
User Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36

Steps to reproduce:

I downscaled an image with an actual size of 960px width to 940px width by setting the style of the image element to width: 940px

Actual results:

Image shows briefly and then expands inside the border of the element so that the rightmost column(s) of pixels disappear

Expected results:

Image should have been downscaled and then shown with no further events. This happens briefly, the downscaling is ok but then it stretches on some values relative to both actual size of image and the set size of image (this only happens on some values). Go to for test page.
IE, Chrome, Opera and Safari handles all of these as expected and I know how to get around it but it's still a bug. Also, this happens both when FF loads an image on its own and when you change the source of an image with Javascript but I guess it's most of a problem when you use a Javascript function to swap image source and every image is moving after it's been displayed.

Comment 1

5 years ago
This bug is due to the high-quality image downscaler that was introduced in bug 486918. The normal downscaler and the high-quality one round their target dimensions differently, e.g. take a 1920x1200 image with max-width:1085px, which ought to be scaled down to 678.125px tall. The high-quality resizer instead resizes it to 679px tall and then crops the bottom pixel off. The normal downscaler resizes it to 678.125px tall and then crops off the bottom 0.125px.

Since images are first rendered with the normal downscaler, and then replaced with the high-quality version, you see a visible shift in images when the high-quality algorithm kicks in. I first noticed this by opening a bunch of large images with different dimensions as top-level images in a bunch of tabs, waiting the 10s until the images in the background tabs were discarded, and then switching between the tabs. Depending on the exact dimensions of each image, some of them shift when they're decoded again.

I have a slightly less psychedelic example page here: Click the button repeatedly, then try again with image.high_quality_downscaling.enabled = false.
Blocks: 486918
Component: Untriaged → ImageLib
Product: Firefox → Core

Comment 2

5 years ago
I think that's a dupe of bug 925611.

Comment 3

5 years ago
My example page no longer shows the shifting, so I'd say this is fixed.
Last Resolved: 5 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.