Using spinner font with rotation - css

Question

I'm using a spinner icon from a font set and rotating it. I must set the transform-origin to define the centre of rotation of the icon to avoid wobbling (as suggested here). However, if I change the font size, the wobbling effect comes again. The same happens if I change the browser resolution.
HTML:
<div>
<p>First icon</p>
<i id="first" class="fa fa-spinner rotation-animation"></i>
</div>
<div>
<p>Second icon</p>
<span id="second" class="fa fa-spinner rotation-animation"></span>
</div>
<div>
<p>Third icon</p>
<span id="third" class="fa fa-spinner rotation-animation"></span>
</div>
<div>
<p>Fourth icon</p>
<span id="fourth" class="fa fa-spinner rotation-animation"></span>
</div>
CSS:
.rotation-animation {
animation: div-rotate 0.7s infinite steps(8);
transform: translateZ(0);
-webkit-transform: translateZ(0);
transform-origin: 50% 51%;
-webkit-transform-origin: 50% 51%;
}
#keyframes div-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#-webkit-keyframes div-rotate {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#first {
font-size: 20px;
}
#second {
font-size: 30px;
}
#third {
font-size: 40px;
}
#fourth {
font-size: 50px;
}
https://jsfiddle.net/r944z1a6/
As you can see in the above link, the second icon is the only one which does not wobble. If you change the browser resolution, the second one will wobble too.
Why is it happening? The x and y percent offsets to the centre of rotation shouldn't change when changing the font size. Isn't it?
Is there any way to fix this and make the spinner not to wobble for any size/resolution?
Note: I've used font awesome for the example, but I'm actually using a custom font, which has the same effect.
EDIT:
Regardless of #vals answer, the only way that I've found which doesn't seem to wobble is using linear rotation:
animation: div-rotate 0.7s infinite linear;
It's not so cool, but works.

Answer 1

There is nothing wrong with the font-awesome icon, and spinning it.
Try setting it to 200px and you will see that it spins perfectly.
The wobbling that you see, and that you are trying to correct, arises from rounding px from the browser at small font sizes.
It's impossible to predict what will be the size rounding for any font size and browser zoom.
So, the only way to get a perfect solution is to make your effect at a larger scale, and then scale it
.rotation-animation {
animation: div-rotate 0.7s infinite steps(8);
transform: translateZ(0);
transform-origin: 50% 50%;
}
#keyframes div-rotate {
0% { transform: rotate( 0deg) scale(0.1);}
100% { transform: rotate(360deg) scale(0.1);}
}
#first {
font-size: 200px;
margin: -90px;
}
#second {
font-size: 300px;
margin: -140px;
}
#third {
font-size: 400px;
margin: -180px;
}
#fourth {
font-size: 500px;
margin: -230px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
<p>First icon</p>
<i id="first" class="fa fa-spinner rotation-animation"></i>
</div>
<div>
<p>Second icon</p>
<span id="second" class="fa fa-spinner rotation-animation"></span>
</div>
<div>
<p>Third icon</p>
<span id="third" class="fa fa-spinner rotation-animation"></span>
</div>
<div>
<p>Fourth icon</p>
<span id="fourth" class="fa fa-spinner rotation-animation"></span>
</div>