Image shifting/jumping after CSS transition effect

问题:

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!

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/

回答1:

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

回答2:

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

回答3:

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>