css - 在 Firefox 中使用缩放变换的 CSS 过渡效果后图像移动/跳跃

Question

我在最新的 Firefox 浏览器版本 34(系统:Windows 7，屏幕宽度:1600px)中遇到问题。将鼠标悬停在图像上后，我通过缩放图像(在某些容器中)产生了效果。我正在使用 transform: scale(1.1) 和 transition: transform 0.3s ease-in-out。但是当我将鼠标悬停在图像上并放大图像后......它会产生一些奇怪的 1px 偏移。一些呈现浏览器的错误，但我希望现有的一些修复程序。

最重要的CSS定义和部分HTML代码:

figure {
   display: block;
   overflow: hidden;
   position: relative;
   backface-visibility: hidden;
}
figure img {
   width: 100%;
   transform: scale(1);
   transition: transform 0.3s ease-in-out;
   }
figure:hover img {
   transform: scale(1.1);
}

 <figure>
     <img class="img-responsive" src="http://lorempixel.com/600/400/fashion/7">
 </figure>

带有错误的示例在线:http://templates.silversite.pl/test/jumpingimg/

我也看到有人可以修复它，但我不知道如何，例如http://demo.qodeinteractive.com/bridge/ 上的“我们最近的工作”框

Answer 1

我在我的元素中遇到了类似的问题。所有图像都是 position: absolute; 并且 transform 看起来像这样:

figure img{
   transform: translate( -50%, 50%) scale(1);
   position: absolute;
   top: 50%;
   left: 50%;
}

figure img:hover{
   transform: translate( -50%, 50%) scale(1.1);
}

我用 scale3d 替换了每个 scale，这解决了我的问题。最终样式如下所示:

figure img{
   transform: translate( -50%, 50%) scale3d(1, 1, 1);
   position: absolute;
   top: 50%;
   left: 50%;
}

figure img:hover{
   transform: translate( -50%, 50%) scale3d(1.1, 1.1, 1);
}

希望这能解决你的问题