·

photo credit: Debajo del azul via photopin (license)

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:

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.

Visitors give this article an average rating of 3.8 out of 5.

How would you rate this article?

9 thoughts on “How to fix shaking CSS transitions in Firefox”

  1. Gaya says:

    Thanks for sharing :). Stupid Firefox

  2. Pierre says:

    Thank you so much! Works like charm for IE! 🙂

  3. Bogdan says:

    i love you!! it fixed bug in IE also.

  4. Thanks man, you saved me!

  5. shyam Mohan says:

    Thank you so much..

  6. Absolutely amazing the only fix I actually found online, thanks man

  7. roccobal says:

    Pretty cool. This worked for me, but it does make text a tiny bit blurry.

    Good tradeoff.

  8. iunia says:

    Wow, this is awesome. My client was asking for this, and i was like…yeah, about that! Thanks so much !

Leave a Reply