Images with opacity “jumping” on hover in Firefox

问题:

I have an image which I've faded out using opacity css. The opacity of the image returns to 1 when hovered.

However, in Firefox, it appears to "jump" a little when hovered over. It seems to be something to do with the way Firefox smooths the image while faded - is there a way around this?

Here's a fiddle:

http://jsfiddle.net/jngS8/5/

<div class="container">
    <a class="opacity">
        <img src="http://imgur.com/EhiSptf.png" />
    </a>
</div>

CSS:

img {
    height: auto;
    max-width: 100%;
}
.container{
    width:200px;
}

.opacity {
    opacity: 0.6;
}
.opacity:hover { 
    opacity:1;
}

回答1:

Set

-moz-backface-visibility: hidden;

on the image.

Source: http://nickpye.com/2013/04/03/css3-opacity-transition-image-wiggle-bug-in-mozilla-firefox/. That article is talking about CSS transitions, but looks like it works without transitons, too.

http://jsfiddle.net/jngS8/6/