780521 - Image pixel jog on hover change of opacity

Status: RESOLVED DUPLICATE of bug 745549

(Firefox :: Untriaged, defect)

Description

[jw]

Attachment: opacity-jog.gif

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:14.0) Gecko/20100101 Firefox/14.0.1
Build ID: 20120713134347

Steps to reproduce:

I've encountered this on two responsive websites I've built. Have an image that is resized through max-height or max-width. Then give it a hover style of less than 100% opacity (e.g. opacity:0.75).


Actual results:

When you hover over the image, it jogs/stretches by a pixel; it looks bad. On the site I am working on now, it actually is reducing the height of the image by 1 pixel on hover. I took an image of width 244px by 144px, and this happened when I set the max-height to 100px, and also when I set the max-width to 100px.


Expected results:

The 100% opacity image should be consistent with how the less than 100% opacity image is displayed. It should not stretch/shrink the image; only the opacity should be changing.

Animated gif of the hover is attached.