在Firefox中悬停时不透明度“跳跃”的图像

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

我有一个使用不透明度css消失的图像。悬停时图像的不透明度返回到1。

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?

然而，在Firefox中，它似乎在盘旋时“跳”一点。这似乎与Firefox在褪色时平滑图像的方式有关 - 有没有办法解决这个问题？

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:

CSS：

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

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

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：//nickpye.com/2013/04/03/css3-opacity-transition-image-wiggle-bug-in-mozilla-firefox/。那篇文章讨论的是CSS转换，但看起来它也可以在没有过渡的情况下工作。

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

#1

Set

组

-moz-backface-visibility: hidden;