我在最新的 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/ 上的“我们最近的工作”框
最佳答案
我在我的元素中遇到了类似的问题。所有图像都是 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);
}
我用 scale3d
替换了每个 scale
,这解决了我的问题。
最终样式如下所示:
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);
}
希望这能解决你的问题
关于css - 在 Firefox 中使用缩放变换的 CSS 过渡效果后图像移动/跳跃,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27825098/