Image stretches after JS image source change in Firefox

Question

Scroll through the images in Firefox (tested on v. 26) and you notice if you look to the right that the image stretches one pixel (or so) after its .src has been changed. This behaviour only occurs in Firefox and if the width of the image is increased or decreased by 1px (through web console), the behaviour disappears... I know that the image is bigger than the width I set but it still doesn't explain the behaviour and why it's only occuring at a very specific width (after all, image is still resized in browser if I increase or decrease the width by 1px as well but then the behaviour disappears). Works perfect in Opera, Chome, Safari and IE...

http://www.mosaikdesign.se/galleri_.php

Anyone?

Answer 1

I spent some time researching this and they way I see it, it's a bug.

I filed a bug report at Bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=953364

I also made a thorough test page for those interested in studying this behaviour: http://www.blackwinged-angel.com/bugs/index.html

And finally, the fix:

-Set css property image-rendering on the image to something else than auto (optimizequality, optimizespeed, -moz-crisp-edges). It's claimed in the documentation that optimizequality and optimizespeed are the same as auto (https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering) but they do result in different downscaling algorithms being used (see my link for proof). However, this fixes the problem.

-Use image sizes where images are only upscaled, not scaled at all or check the resulting downscaling since it only applies to certain sizes of the containing element in relation to certain actual image sizes, not all.

Again folks, this only applies to Firefox, was tested on Firefox 26, applies to downscaling images on-the-fly in the browser by styling img (and possibly other) elements with width and height and it's not consistent (just happens at about roughly 30% of tested downscalings on a specific image for me).