Internet Explorer 11 shaky CSS3 animations

Question

Please refer to this script: 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, but for some reason in IE11 there is a noticeable “wobble” of the circle when it rotates.

Any ideas why this is so hesitant? Is there a way to fix it in IE11?

Answer 1

For what it's worth, it also happens in other browsers. He should do how to draw a border, this is not a perfect round. As far as I know, there is no 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/