在Firefox中使用缩放变换进行CSS过渡效果后的图像移位/跳跃

Question

我在最新的Firefox浏览器版本34(系统:Windows 7,屏幕宽度:1600px)中遇到问题.在将鼠标悬停在其上后,我使用缩放图像(在某些容器中)生效.我正在使用transform:scale(1.1) with transition:transform 0.3s ease-in-out.但是当我将鼠标悬停在图像上,并在图像放大之后......它会产生一些奇怪的1px变换.一些渲染浏览器的bug,但我希望现有的一些修复它.请帮忙!

最重要的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>

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

我也看到有人可以解决它,但我不知道如何,例如http://demo.qodeinteractive.com/bridge/上的"我们最近的工作"框

Answer 1

我的项目遇到了类似的问题.所有图像都是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,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);
}

希望能解决你的问题

Answer 2

在您提供的链接http://demo.qodeinteractive.com/bridge/ 上，如果您真的去这里：http : //demo.qodeinteractive.com/bridge/portfolio/gallery-style-condensed/two-columns- grid/，您可以看到，一旦查看开发工具，它们会在左侧/右侧应用“1px”的边距

.projects_holder.hover_text.no_space article .image img {
   margin: 0 1px;
}

如果您禁用该样式，当您将鼠标悬停在图像上时，您会看到图像按照您的描述移动。

因此，您的图像 CSS 应该是：

figure img {
   width: 100%;
   transform: scale(1);
   transition: transform 0.3s ease-in-out;
   display: block;  /* (or inline-block) */
   margin: 0 1px;
}