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

我最近遇到一个问题Firefox浏览器版本34（系统：Windows 7，屏幕宽度：1600px）。将鼠标悬停在图像上（在某些容器中）后，我通过缩放图像来实现效果。我在用变换：缩放(1.1) with 过渡：变换 0.3s 缓入缓出。但是当我将鼠标悬停在图像上并在图像放大后......它会产生一些奇怪的 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://templates.silversite.pl/test/jumpingimg/

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

我的项目也遇到了类似的问题。所有图像都是position: absolute;和转换看起来像这样：

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

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

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

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

希望这能解决你的问题