How to fix shaking CSS transitions in Firefox

Recently I was playing with CSS transitions. I used it to smoothly zoom in a picture. As expected, everything looked smooth in Chrome, but in Firefox I got a shaking CSS transition. Offcourse, this was a less satisfying result…
The example HTML is quite simple:

You can see the demo here. Hover over the image. Make sure to check it in Chrome and in Firefox. (I’ve tested in Firefox 19) You’ll notice that in Firefox the once so smooth animation will change to a shaking experience. I’m not sure why this happens, but I think it has something to do with the render engine of Firefox.

A small but subtle fix

The fix for this problem took me a while. I first tried changing the render settings or hardware accelerating options for Firefox, but with no success. I still had a shaking CSS transition in Firefox. But then I noticed that when I rotated the image slightly as well, Firefox would stop shaking and rendered a smooth – though slightly rotated – transition. Setting the rotation value as low as 0.02 degree already did the trick for me, but this also depends on how slightly the zoom animation is:

CSS

1

2

3

4

#container img:hover {

-webkit-transform:scale(1.2);

-moz-transform:scale(1.2)rotate(0.02deg);

}

There! That seems to fix it! Although it’s not a 100% clear fix (since the image will be rotated in Firefox), it does qualify for a 99.9% fix, since the rotation is so small your visitors won’t even notice it.

This is the blog Giel Berkers,
a fulltime web developer from The Netherlands with a passion for the web.
I want to share ideas, knowledge, but also learn from
my readers. If you got any questions, or need help with something, feel free to drop me a
line.If I think that more people can benefit from the answer on your question, I'll write a blog post about it.