我最近遇到一个问题Firefox浏览器版本34（系统：Windows 7，屏幕宽度：1600px）。将鼠标悬停在图像上（在某些容器中）后，我通过缩放图像来实现效果。我在用变换：缩放(1.1) with 过渡：变换 0.3s 缓入缓出。但是当我将鼠标悬停在图像上并在图像放大后......它会产生一些奇怪的 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://templates.silversite.pl/test/jumpingimg/
我还看到有人可以修复它，但我不知道如何修复，例如“我们最近的工作”框http://demo.qodeinteractive.com/bridge/ http://demo.qodeinteractive.com/bridge/
我的项目也遇到了类似的问题。所有图像都是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 with 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);
}
希望这能解决你的问题
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
