CSS rotation in IE is "jittery"

Question

I created a CSS3 animation that works as intended, but on Internet Explorer the rotation is very jittery.

I'm creating a spinner loading indicator so I use CSS animations to do a transform: rotate(...);. On Chrome and other browsers, the rotation is smooth, but on Internet Explorer it appears slightly wobbly.

I tried setting the transform-origin: center, tried using straight pixel values instead of em units and various other things, but nothing seemed to work.

Any ideas on how to improve this animation?

If I make the "track" (border-color) that the quadrant spins upon completely transparent, it makes the effect less noticeable, but I figured I'd ask in case anyone has any ideas.

.loading {
  display: inline-block;
  font-size: 20px;
  height: 1em;
  width: 1em;
  margin: 0 auto;
  position: relative;
  -webkit-animation: loading 1s infinite linear;
  -moz-animation: loading 1s infinite linear;
  animation: loading 1s infinite linear;
  border-left: 0.25em solid rgba(0, 0, 0, .3);
  border-right: 0.25em solid rgba(0, 0, 0, .3);
  border-bottom: 0.25em solid rgba(0, 0, 0, .3);
  border-top: 0.25em solid rgba(0, 0, 0, .8);
  border-radius: 100%;
  vertical-align: middle;
  margin: 0 0.5em;
}

.loading * { display: none; }
@keyframes loading { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@-moz-keyframes loading { from { -moz-transform:rotate(0deg); } to { -moz-transform:rotate(360deg); } }
@-webkit-keyframes loading { from { -webkit-transform:rotate(0deg); } to { -webkit-transform:rotate(360deg); } }

<div class="loading"></div>

In this question the marked answer has a really nice solution in the first edit (sand - CSS) which helped me out nicely http://stackoverflow.com/questions/4617220/css-rotate-property-in-ie — Andrew Adam, Jan 04 '16 at 18:39
Thanks for the feedback @AndrewAdam. I will review the cssSandpaper plugin at some point to see if it is a viable alternative. It seems like it could be helpful if we deem support for <=IE8 is needed, but I'm still curious to see if there is an explanation for why the CSS `transform` property isn't that great. — jeffjenx, Jan 04 '16 at 18:46
I believe it's not a problem in the transform. I've seen similar problems in the past, and the real reason is that the circle is not **round**. You won't notice it in a still circle, but it's noticeable when you rotate it. — vals, Jan 04 '16 at 18:48
That is a valid point, @vals. I will play around with the border and see if there is another way to render a circle. I could probably just load a semi-transparent PNG background image and call it a day. Appreciate the response and input. — jeffjenx, Jan 04 '16 at 18:52

score 0 · Accepted Answer · answered Jan 20 '16 at 16:32

So, I ended up using a 256x256 transparent PNG to replicate the effect without using CSS borders, due to IE not being able to render perfect circles with border-radius.

.loading {
  display: inline-block;
  font-size: 20px;
  height: 1em;
  width: 1em;
  margin: 0 auto;
  position: relative;
  -webkit-animation: loading 1s infinite linear;
  -moz-animation: loading 1s infinite linear;
  animation: loading 1s infinite linear;

  /*
  **border-left: 0.25em solid rgba(0, 0, 0, .3);
  **border-right: 0.25em solid rgba(0, 0, 0, .3);
  **border-bottom: 0.25em solid rgba(0, 0, 0, .3);
  **border-top: 0.25em solid rgba(0, 0, 0, .8);
  */
  background-image: url(../images/loading.png);
  background-size: 100% 100%;

  border-radius: 100%;
  vertical-align: middle;
  margin: 0 0.5em;
}

CSS rotation in IE is "jittery"

1 Answers1