(Firefox bug) Font is sloppy when transformed - css

Question

This question was orginally related to FontAwesome, but is a general firefox problem.
So i'm using the class fa-spin that will spin the icon, here you can find some examples of it.
Here is the spinning css file:
// Spinning Icons
// --------------------------
.#{$fa-css-prefix}-spin {
-webkit-animation: spin 2s infinite linear;
-moz-animation: spin 2s infinite linear;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
#-moz-keyframes spin {
0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(359deg); }
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(359deg); }
}
#-o-keyframes spin {
0% { -o-transform: rotate(0deg); }
100% { -o-transform: rotate(359deg); }
}
#-ms-keyframes spin {
0% { -ms-transform: rotate(0deg); }
100% { -ms-transform: rotate(359deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); }
}
Now all works fine in chrome and IE10, however it doesn't in firefox :
jsFiddle.
When you run it for the first time it looks just good, but try the interact with the site(for example: scroll or run the script again in jsFiddle). The animation becomes all jittery. I have no idea what could cause this strange behavior, hope that anyone could help me.
Edit
The problem occurs on Windows 7 32-bit and 25.0 version of Firefox(No add-ons).
However it does work at my home PC, where it also has Windows 7 32-bit 25.0 firefox.
An preview how it looks on my screen:
Note that it works for the first couple of seconds but after it will get jittery (this stuttering is because my .gif is bad).
See my answer for more information

Answer 1

Before you want to add this 'hack', you should first try to update your driver
What i did notice is that IE and Chrome actually makes the text blurry, which FF doesn't. I thought of using the blur filter, but that didn't work. Also the font width didn't stayed the same, so i needed something that or reminded the client of his width or force the width to be static at all time.
I came across the SVG filter XML url, that was special for Firefox 10+ and Firefox on android. I tryed to apply this to my element and my problem was completly gone!
i did use <feColorMatrix type=saturate values=1/> so the saturate filter didn't take away the colors.
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'1\'/></filter></svg>#grayscale");
When adding this to the .fa-spin class that FontAwesome uses, it'll work on every spinning element.
jsFiddle