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

我现在也遇到了同样的问题。此处的解决方案无法解决问题，因此我发布了我为使其正常工作所做的工作。

像 OP 一样，我有一个隐藏了 oveflow 的容器，并且与其中的图像大小相同。图像将在悬停时缩放以创建“缩放”效果 - 但是当最初开始和结束过渡时，图像在底部和右侧“跳跃”/增长了一点点。这使它变得跳跃而不流畅。

我根据百分比计算了组件的尺寸，这导致它们是非整数 (Chrome)。我有一种感觉 Scale & Scale3d 在缩放时围绕像素值，这导致了这种跳跃。我给了一个父容器display:table，这导致所有子容器的宽度/高度都被四舍五入为整数值。这解决了我的问题，图像现在可以平滑缩放！

Answer 2

我刚刚遇到了同样的问题，对我来说，浏览器在缩放完成后会更正十进制像素。或者一些高度和宽度没有被缩放等于并且最终得到纠正的方式。

所以我认为解决方案是使用具有 1 x 1 比率因子的图像。

所以对我来说，当我使用带有width 和height 的400px 的lorempixel 时，问题的代码可以正常工作。

让我知道这是否解决了问题？！

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/400/400/fashion/7">
 </figure>

Answer 3

我在我的项目中遇到了类似的问题。所有图片都是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);
}

我将每个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 4

在您提供的链接上，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;
}