Internet Explorer 11 wobbly CSS3 animation - css

Question

Please refer to this fiddle: http://jsfiddle.net/eQegA/3/
<div class="spinner"></div>
.spinner {
width: 100px;
height: 100px;
border: 50px solid blue;
/*border-top-color: #fff;
border-bottom-color: #fff;*/ /* commented out to see the wobble better */
border-radius: 200px;
-webkit-animation: application-loading-rotate 1s;
animation: application-loading-rotate 1s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
#-webkit-keyframes application-loading-rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes application-loading-rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
In Google Chrome the rotation is stable, however for some reason in IE11 there is a noticable "wobble" of the circle as it rotates.
Any ideas why it wobbles so? Is there any way to fix it in IE11?

Answer 1

For what it's worth, it also occurs on other browsers. It has to do, how the border is drawn, it's not a perfect round. As far as I know, there isn't a quick fix for this. However you can draw the border as a background image.
.spinner {
display:block;
width: 200px;
height: 200px;
border-radius: 100%;
background-image:url(http://www.clipartbest.com/cliparts/9iR/RyK/9iRRyKLie.png);
background-size:100%;
-webkit-animation: application-loading-rotate 1s;
animation: application-loading-rotate 1s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
#-webkit-keyframes application-loading-rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#keyframes application-loading-rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
See:
http://jsfiddle.net/eQegA/26/