Question

我在最新的 Firefox 浏览器版本34（系统：Windows 7，屏幕宽度：1600px）中遇到问题。在将鼠标悬停在其上后，我使用缩放图像（在某些容器中）生效。我正在使用 transform：scale（1.1）和转换：转换0.3s轻松进入。但是当我将鼠标悬停在图像上，并在图像放大之后......它会产生一些奇怪的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>

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

我也看到有人可以解决它，但我不知道如何，例如方框“http://demo.qodeinteractive.com/bridge/

上的”我们最近的工作“

Answer 1

我的项目遇到了类似的问题。所有图片均为##Example $vms=get-azurermvm $vms|Export-Csv "shui.csv" -NoTypeInformation，转换如下所示：

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

希望能解决您的问题

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

Answer 3

我现在刚刚遇到了同样的问题。这里的解决方案没有解决问题，所以我发布了我为使其工作所做的工作。

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

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

Answer 4

我只是遇到了同样的问题，对我来说，缩放完成后，浏览器会更正小数像素。或某些高度和宽度如何不按比例缩放，并最终得到纠正。

因此，我认为解决方案是使用具有 1 x 1比例因子的图像。

因此，对于我来说，当我使用带有width的{{1}}和height的lorempixel时，问题代码可以正常工作。

让我知道是否可以解决问题？！

400px

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

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

4 个答案: