Wobbly CSS Animation with Border-Radius in Internet Explorer

Question

In Internet Explorer this animation appears to wobble. I was reading the answer to this question and they made it sound as though it is possible to fix.

I cannot really use an image as the border radius is not constant, and I would prefer not to use an animated gif.

I understand 'wobble' is not a very good description but I can't think of any other words to describe it. I have not tested it with Opera/Safari, so if you have either of them I would like to know if they display correctly or also have the problem. Please run the following Snippet in Chrome/Firefox and compare it to the Snippet in Internet Explorer:

@keyframes spin{
 0% {transform:rotateZ(0deg);}
 50% {transform:rotateZ(360deg);border-radius:60%;}
 100%{transform:rotateZ(720deg);}
}
@-webkit-keyframes spin{
 0% {transform:rotateZ(0deg);}
 50% {transform:rotateZ(360deg);border-radius:60%;}
 100%{transform:rotateZ(720deg);}
}
@-moz-keyframes spin{
 0% {transform:rotateZ(0deg);}
 50% {transform:rotateZ(360deg);border-radius:60%;}
 100%{transform:rotateZ(720deg);}
}
@-ms-keyframes spin{
 0% {transform:rotateZ(0deg);}
 50% {transform:rotateZ(360deg);border-radius:60%;}
 100%{transform:rotateZ(720deg);}
}
@-o-keyframes spin{
 0% {transform:rotateZ(0deg);}
 50% {transform:rotateZ(360deg);border-radius:60%;}
 100%{transform:rotateZ(720deg);}
}
#spinme{
 display:inline-block;
 position:relative;
 left:0;
 top:0;
 margin:0.2rem;
 width:0.8rem;
 height:0.8rem;
 border:0.2rem solid black;
 border-radius:0;
 outline: 1px solid transparent; /* require to remove jagged edges in firefox */
 transform:rotateZ(0deg);
 animation: spin infinite 4s;
 -webkit-animation: spin infinite 4s;
 -moz-animation: spin infinite 4s;
 -ms-animation: spin infinite 4s;
 -o-animation: spin infinite 4s;
}
#spinme:nth-child(2){animation-delay:0.06s}
#spinme:nth-child(3){animation-delay:0.12s}
#spinme:nth-child(4){animation-delay:0.18s}

<div id="spinme"></div>
<div id="spinme"></div>
<div id="spinme"></div>
<div id="spinme"></div>

The outline hack to fix the sharp edge came from this answer.

---

As a side question, and out of curiosity, which of those prefixes are actually required? I was looking at the compatibility requirements to get it working in older browsers, but it only ever mentions the -webkit prefix: none of the -moz,-ms or -o prefixes seem to be needed for any browser version.

I have also just checked shouldiprefix and they seem to agree with caniuse, but given how similar the names are I thought that the same community/company may run both websites. Should I just remove the other prefixes?

Answer 1

It looks like it is the transparent outline interfering with the edge of the object. The outline is always a square (as you can see by using outline: 1px solid blue; for example). I can only assume that using a 1px transparent outline outline over an interpolated circular shape causes the rendering issue.

Replacing outline:1px solid transparent; with outline:1px solid rgba(255, 255, 255, 0); or outline:0 solid transparent; fixes Edge and IE11 for me. I don't have Firefox so I cannot test if this also removed the jagged edges still.

@keyframes spin{
    0% {transform:rotateZ(0deg);}
    50% {transform:rotateZ(360deg);border-radius:60%;}
    100%{transform:rotateZ(720deg);}
}
@-webkit-keyframes spin{
    0% {transform:rotateZ(0deg);}
    50% {transform:rotateZ(360deg);border-radius:60%;}
    100%{transform:rotateZ(720deg);}
}
@-moz-keyframes spin{
    0% {transform:rotateZ(0deg);}
    50% {transform:rotateZ(360deg);border-radius:60%;}
    100%{transform:rotateZ(720deg);}
}
@-ms-keyframes spin{
    0% {transform:rotateZ(0deg);}
    50% {transform:rotateZ(360deg);border-radius:60%;}
    100%{transform:rotateZ(720deg);}
}
@-o-keyframes spin{
    0% {transform:rotateZ(0deg);}
    50% {transform:rotateZ(360deg);border-radius:60%;}
    100%{transform:rotateZ(720deg);}
}
#spinme{
    display:inline-block;
    margin:0.2rem;
    width:0.8rem;
    height:0.8rem;
    border:0.2rem solid black;
    border-radius:0;
    outline:0 solid transparent;
    transform:rotateZ(0deg);
    animation: spin infinite 4s;
    -webkit-animation: spin infinite 4s;
    -moz-animation: spin infinite 4s;
    -ms-animation: spin infinite 4s;
    -o-animation: spin infinite 4s;
}

<div id="spinme"></div>

As for the vendor prefix part, when I was testing locally I see that IE11 and Edge both support the prefix-less animation: spin infinite 4s; but IE11 still supports -ms-animation. Edge does not supports -ms-animation but does support -webkit-animation - see Will Microsoft Edge use prefixes like -webkit- or -ms-?. So depending on your target browser audience you can choose to leave out deprecated properties if you wish, although I would leave them all for now so that older browsers are not excluded.

Note: I did see that toggling CSS properties in the Edge inspector showed the calculated border-[top|bottom]-[left|right]-radius properties were sometimes a percentage and sometimes a hard px value. I'm not sure this is related or relevant to the problem though.

Answer 2

To fix the IE Internet Explorer bug where rotating things causes a wobble, try this. The transform-origin should be set to half the width in all dimensions(x, y and z).

If your element is 40px wide and tall, set the properties like this:

transform-origin: 20px 20px 20px;