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

我在最新的Firefox浏览器版本34（系统：Windows7，屏幕宽度：1600px）中遇到问题。我把鼠标悬停在它上面后，通过缩放图像（在某个容器中）取得了效果。我正在使用变换：比例（1.1）和变换：变换0.3s缓进缓出。但当我在图像上悬停，图像放大后。。它使一些奇怪的1px移动。一些渲染浏览器的错误，但我希望现有的一些修复

最重要的CSS定义和HTML代码的一部分：

图{
显示：块；
溢出：隐藏；
位置：相对位置；
背面可见性：隐藏；
}
图img{
宽度：100%；
变换：比例（1）；
转换：转换0.3s轻松输入输出；
}
图：悬停img{
转换：比例（1.1）；
}

---

在您提供的链接上，如果您真的转到这里：，您可以看到，一旦查看开发工具，它们在左侧/右侧应用了“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;
}

---

我的项目也有类似的问题。所有图像均

位置：绝对和变换如下所示：

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

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

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
替换了每个
scale
，解决了我的问题。
最终的样式如下所示：

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

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

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

希望这将解决您的问题
我刚刚讨论了相同的问题，对我来说，在缩放完成后，浏览器似乎会更正十进制像素。或者说，高度和宽度的比例不相等，最后得到了修正

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

因此，对我来说，当我使用lorempixel的
宽度
和
高度
为
400px
时，问题的代码工作得很好

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


图{
显示：块；
溢出：隐藏；
位置：相对位置；
背面可见性：隐藏；
}
图img{
宽度：100%；
变换：比例（1）；
转换：转换0.3s轻松输入输出；
}
图：悬停img{
转换：比例（1.1）；
}
我现在遇到了同样的问题。这里的解决方案并没有解决这个问题，所以我在这里发布了我所做的工作，以使其正常工作

像OP一样，我有一个隐藏了oveflow的容器，大小与里面的图像相同。该图像将在悬停时缩放以产生“缩放”效果，但在最初开始和结束过渡时，图像在底部和右侧“跳跃”/略微增大。这使它跳跃而不平稳

我根据百分比计算了组件的尺寸，这使得它们成为非整数（Chrome）。我有一种感觉，缩放时缩放3D的像素值，这导致了这种跳跃。我给了一个父容器
display:table
，它使所有子容器的宽度/高度四舍五入为整数值。这为我解决了这个问题，现在图像可以平滑缩放了
 我有一个页面，它只在方形图像上“跳跃”（因为它们相对较小，如果我增大它们的大小，跳跃就会消失）非常感谢-我花了大约一个小时试图弄清楚为什么在放大/缩小页面时，画布上的一些转换元素会发生奇怪的变形，但是你建议替换“缩放”用“scale3d”神奇地解决了这个问题。太棒了！5年后，这仍然是解决过渡跳跃问题的方法。对这对我有用！！仅在某些浏览器宽度上发生，但如果需要像素完美，则使用父容器上的display:table。