Image / jump offset after CSS transition effect with scale conversion in Firefox

Question

I have a problem in the latest version of Firefox 34 browser (system: Windows 7, screen width: 1600px). I made an effect with enlarging the images (in some container) after hovering over it. I am using transform: scale (1.1) with the transition: transform 0.3s easy-in-out . But when I move the cursor over the image and after zooming in ... an odd shift of 1 pixel will occur. Some rendering error in the browser, but I hope the existing one fixes this. Please help!

The most important definition of CSS and part of the HTML code:

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> 

An example error can be found here: http://templates.silversite.pl/test/jumpingimg/

I also saw that someone can fix this, but I don’t know, like, for example, the insert “Our latest work” at http://demo.qodeinteractive.com/bridge/

Answer 1

I had a similar problem in my project. All images were position: absolute; , and the transformation It looked like this:

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

I replace each scale with scale3d and this solved my problem. The final styles look like this:

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

Hope this fixes your issue.

Answer 2

In the link provided http://demo.qodeinteractive.com/bridge/ , if you really go here: http://demo.qodeinteractive.com/bridge/portfolio/gallery-style-condensed/two-columns-grid/ , you you can see that, looking at the developer’s tools, they use the “1px” marker on the left / right side

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

If you turn off this style, you will see the image move as you describe when you hover over the image.

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