Image shifting/jumping after CSS transition effect with scale transform in Firefox

Question

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 hov

Answer 1

I just run over the same issue and for me it looks like that the browser corrects the decimal pixel after the scaling is done. Or some how the height and the width doesn't get scaled equals and that gets corrected in the end.

So I think the solution is to use an image with a 1 x 1 ration factor.

So for me the code of the question works fine when I use a the lorempixel with a width and height of 400px.

Let me know if that solves the issue?!

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