March 31^st 2013

photo credit: Debajo del azul via photopin (license)

How to fix shaking CSS transitions in Firefox

Tags: css transitions, firefox, scss

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:

<html>
<head>
    <title>Grid example</title>
    <style type="text/css">
        #container {
            width: 397px;
            height: 385px;
            overflow: hidden;
        }
        #container img {
            -webkit-transition: all 4s;
            -moz-transition: all 4s;
        }
        #container img:hover {
            -webkit-transform: scale(1.2);
            -moz-transform: scale(1.2);
        }
    </style>
</head>
<body>
    <div id="container">
        <img src="http://www.gielberkers.com/wp-content/uploads/2013/03/download.gif"
             alt="grid" width="397" height="385"/>
    </div>
</body>
</html>

<html>

<head>

<title>Grid example</title>

#container {

width: 397px;

height: 385px;

overflow: hidden;

}

#container img {

-webkit-transition: all 4s;

-moz-transition: all 4s;

}

#container img:hover {

-webkit-transform: scale(1.2);

-moz-transform: scale(1.2);

}

</style>

</head>

<body>

<img src="http://www.gielberkers.com/wp-content/uploads/2013/03/download.gif"

alt="grid" width="397" height="385"/>

</div>

</body>

</html>

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:

#container img:hover {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2) rotate(0.02deg);
}

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

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

How would you rate this article?

★ ★ ★ ★ ★

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

Gaya says:

March 31, 2013 at 22:51

Thanks for sharing :). Stupid Firefox

Reply
Pierre says:

March 8, 2014 at 12:08

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

Reply
Bogdan says:

January 21, 2015 at 01:29

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

Reply
Amit Choukroune says:

February 24, 2015 at 16:05

Thanks man, you saved me!

Reply
shyam Mohan says:

December 11, 2015 at 15:50

Thank you so much..

Reply
Craig Riviere says:

June 14, 2016 at 02:44

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

Reply
Jiří Dvořák says:

October 5, 2016 at 09:53

yessss!

Reply
roccobal says:

April 14, 2017 at 22:42

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

Good tradeoff.

Reply
iunia says:

May 19, 2017 at 09:47

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

Reply