CSS转换效果后的图像移位/跳跃与Firefox的缩放变换 [英] Image shifting/jumping after CSS transition effect with scale transform in Firefox

问题描述

我在最新的 Firefox 浏览器版本34（系统：Windows 7，屏幕宽度：1600像素）中遇到问题。我在缩放图像（在某些容器中）后将其悬停在上面。我使用 transition：transform 0.3s ease-in-out 使用 transform：scale（1.1）。但是当我在图像上悬停时，图像放大后，它做一些奇怪的1px移位。一些渲染浏览器bug，但我希望现有的一些修复它。请帮助！

I have a problem in latest Firefox browser version 34 (system: Windows 7, screen width: 1600px). I made effect with zooming images (in some container) after hover on it. I am using transform: scale(1.1) with transition: transform 0.3s ease-in-out. But when I hover on image, and after image zoom in.. it make some strange 1px-shifting. Some rendering browser bug, but I hope that existing some fix for it. Please, help!

最重要的CSS定义：

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

..和HTML代码的一部分：

..and part of HTML code:

 <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/ 框中的我们最近的工作框>

I saw also that somebody can fix it, but I do not know how, e.g. box "Our recent work" on http://demo.qodeinteractive.com/bridge/

推荐答案

在您提供的链接上， http://demo.qodeinteractive.com/bridge/ ，如果您实际在这里： http://demo.qodeinteractive.com/bridge/portfolio/gallery-style-condensed/two-columns-grid/ ，您可以看到，一次查看开发工具，他们在左/右侧应用1px边距

On the link that you provided, http://demo.qodeinteractive.com/bridge/ , if you actually go here: http://demo.qodeinteractive.com/bridge/portfolio/gallery-style-condensed/two-columns-grid/ , you can see that, once looking at dev tools, that they apply a margin of "1px" on left/right side

.projects_holder.hover_text.no_space article .image img {
   margin: 0 1px;
}

如果禁用该样式，

因此，图片的CSS应该是：

Therefore, your CSS for the image should be:

figure img {
   width: 100%;
   transform: scale(1);
   transition: transform 0.3s ease-in-out;
   display: block;  /* (or inline-block) */
   margin: 0 1px;
}

这篇关于CSS转换效果后的图像移位/跳跃与Firefox的缩放变换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！