Firefox中带有缩放变换的CSS过渡效果后的图像移动/跳跃

Posted 2023-03-06

【中文标题】Firefox中带有缩放变换的CSS过渡效果后的图像移动/跳跃

【英文标题】：Image shifting/jumping after CSS transition effect with scale transform in Firefox

【发布时间】：2015-03-05 16:20:08

【问题描述】：

我在最新的 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/上的“我们最近的工作”框

【参考方案1】：

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

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

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

【讨论】：

是的！这对我有用！仅在某些浏览器宽度上发生，但如果您需要完美像素，则在父容器上使用 display: table。

【参考方案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>

【讨论】：

我有一个页面，它只在方形图像上“跳跃”（因为它们相对较小，如果我增加它们的大小，跳跃就会消失）

【参考方案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);

希望这能解决您的问题

【讨论】：

非常感谢 - 我花了大约一个小时试图弄清楚为什么我的画布上的一些转换后的元素在放大/缩小页面时会奇怪地变形，但是你建议替换“比例”用“scale3d”神奇地解决了这个问题。

【参考方案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;

【讨论】：

太棒了！ 5年后，这仍然是解决过渡跳跃问题的方法。 ?