不透明度的图像“跳跃”悬停在Firefox中 [英] Images with opacity "jumping" on hover in Firefox

问题描述

我有一个图像，我已经淡出使用 opacity css。

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

这是一个小提琴：

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

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

CSS：

 code> img {
 height：auto; 
 max-width：100％; 
} 
 .container {
 width：200px; 
} 
 
 .opacity {
 opacity：0.6; 
} 
 .opacity：hover {
 opacity：1; 
} 
  

解决方案

设置

  -moz-backface-visibility：hidden; 
 
 
 
 
 $ b   http：// nickpye。 com / 2013/04/03 / css3-opacity-transition-image-wiggle-bug-in-mozilla-firefox / 。 
这篇文章是关于CSS转换，但看起来像没有transitons也工作。
 
 
 
  http：//jsfiddle.net/jngS8/6/  
 
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;
}

解决方案
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/

                        
这篇关于不透明度的图像“跳跃”悬停在Firefox中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！