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 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.

Most important CSS definition and part of 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>

Sample with bug is online here: http://templates.silversite.pl/test/jumpingimg/

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/

score 24 · Answer 1 · answered Jun 26 '17 at 01:35

I had a similar problem on my project. All images were position: absolute; and the transform look like that:

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 every scale with scale3d and that solved my problem. The final styles look like that:

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 that's will fix your problem

Thank you very much - I spent like an hour trying to figure out why some of the transformed elements on my canvas was deforming strangely upon zooming the page in/out, but your suggestion of replacing "scale" with "scale3d" magically solved the issue. — Artanis, Apr 28 '20 at 15:31

score 5 · Answer 2 · answered Jan 09 '15 at 18:40

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

If you disable that style, you'll see the image move as you're describing when hovering on 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;
}

Amazing! 5 years later, this is still what solves the transition jumping issue. — sbgib, Jan 04 '21 at 11:06

grzehu · Answer 3 · 2022-08-05T12:33:36.480

7,5 years later it's still an issue and the now solution is will-change css property. Only IE won't get this, but others seems to be doing fine - no more px jumping (edit: on non retina screens).

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);
   will-change: transform;
}

score 1 · Answer 4 · answered Jan 15 '21 at 19:31

I have just run into this same problem now. The solutions here didn't fix the issue, so I'm posting what I did to get this to work.

Like OP I had a container with oveflow hidden and was the same size as the image inside it. The image would scale on hover to create a 'zoom' effect - but when initially starting and ending the transition, the image was "jumping"/growing a tiny bit on the bottom and right-hand side. This made it jumpy and not smooth.

I had calculated the dimensions of my components based off of percentages, which caused them to be non-integers (Chrome). I have a feeling Scale & Scale3d round the pixel values when scaling, which caused this jump. I gave a parent container display:table, which caused all children to have their width/heights be rounded to be an integer value. This fixed the issue for me, and the images now scale smoothly!

Yes! This works for me!! Only happens on certain browser widths but if pixel perfect is what you need, then use display: table on the parent container. — Seppe Beelprez, Jan 20 '21 at 08:55

score 0 · Answer 5 · answered Mar 14 '19 at 10:21

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

 <figure>
     <img class="img-responsive" src="http://lorempixel.com/400/400/fashion/7">
 </figure>

I have a page where it only 'jumps' on the square images (because they are relatively small, if I increase their size the jump disappears) — 00-BBB, May 16 '19 at 11:31

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

5 Answers5

Linked