Img在改变不透明度时移动:悬停

Question

所以我有一个内部带有图像的div,我希望以0.7不透明度开始,并在悬停时更改为1,但我遇到一个明显的错误,即图像移动1px或小1px(我无法确定当我在悬停时改变不透明度时.
这显然是一个已知的错误,但其他问题中的修复都没有对我有用.我试过设置背面可见性:隐藏; 并进行转换,但错误仍然存​​在.

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

谢谢,亚当

编辑 - JS小提琴 - http://jsfiddle.net/wfe70gd1/6/

这里可以看到实例(图表右下方) - http://mmdoc.ajhtestserver.com/decks/1/

它似乎只在Firefox中发生

Answer 1

您希望将背面可见性选择器添加到父类(.collapse).您还需要包含选择器的Mozilla版本.包括Opera在内也不会受到伤害.

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