Img moves when changing opacity on :hover

Question

So I have a div with an image inside it that I want to start out at 0.7 opacity and change to 1 on hover but I am encountering an apparent bug where the image either moves 1px or gets 1px smaller (I can't tell for sure which) when I change the opacity on hover.
This is apparently a known bug but none of the fixes in the other questions have worked for me. I have tried setting backface-visibility: hidden; and doing a transform but the bug remains.

Are there any new solutions to this bug?

.collapse img { 
    width: 100%;
    margin-top: -90px; 
    margin-left: 75px;
    opacity: 0.7; 
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
    border:none;
} 
.collapse:hover img {
    width: 100%; 
    opacity: 1;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0); 
    border:none;
}

Thanks, Adam

EDIT - JS Fiddle - http://jsfiddle.net/wfe70gd1/6/

Live example can be seen here (right column below the charts) -- http://mmdoc.ajhtestserver.com/decks/1/

Also it only appears to be happening in Firefox

Answer 1

You want to add the backface-visibility selector to your parent class (.collapse). You also need to include the Mozilla version of the selector. Wouldn't hurt to include Opera, too.

-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);