불투명도가 "점프"인 Firefox의 이미지

Question

나는 opacity css를 사용하여 색이 바랜 이미지가 있습니다. 마우스 오버시 이미지의 불투명도는 1으로 되돌아갑니다.

그러나 파이어 폭스에서는 맴돌 았을 때 약간 "점프"하는 것처럼 보입니다. 그것은 파이어 폭스가 이미지를 부드럽게하는 방식과 관련이있는 것처럼 보입니다.이 문제를 해결하는 방법이 있습니까?

는 여기에 바이올린입니다 :

이

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; 
} 

Answer 1

이미지에

-moz-backface-visibility: hidden; 

을 설정합니다.

출처 : http://nickpye.com/2013/04/03/css3-opacity-transition-image-wiggle-bug-in-mozilla-firefox/. 이 기사는 CSS 전환에 대해 이야기하고 있지만 전환 없이는 작동하는 것처럼 보입니다.

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