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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<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> |
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:
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.
Visitors give this article an average rating of 3.7 out of 5.
How would you rate this article?
★ ★ ★ ★ ★
Thanks for sharing :). Stupid Firefox
Thank you so much! Works like charm for IE! 🙂
i love you!! it fixed bug in IE also.
Thanks man, you saved me!
Thank you so much..
Absolutely amazing the only fix I actually found online, thanks man
yessss!
Pretty cool. This worked for me, but it does make text a tiny bit blurry.
Good tradeoff.
Wow, this is awesome. My client was asking for this, and i was like…yeah, about that! Thanks so much !