html - 更改 :hover 上的不透明度时 Img 移动

Question

所以我有一个包含图像的 div，我想从 0.7 不透明度开始并在悬停时更改为 1，但我遇到了一个明显的错误，图像要么移动 1px 要么变小 1px(我不能当我在悬停时更改不透明度时，请确定是哪个)。
这显然是一个已知的错误，但其他问题中的修复都没有对我有用。我试过设置 backface-visibility: hidden;并进行了转换，但错误仍然存​​在。

这个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 fiddle - 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);