Wobbly CSS animation with border radius in Internet Explorer

Question

In Internet Explorer, this animation seems to fluctuate. I read the answer to this question , and they sounded as if fixable.

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

I understand that “wobble” is not a very good description, but I cannot think of any other words to describe it. I have not tested it with Opera / Safari, so if you have any of them, I would like to know if they are displayed correctly or if there is a problem. Run the following snippet in Chrome / Firefox and compare it with 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 tail outline , to fix a sharp edge, came from this answer .

---

As a side question and out of curiosity, which of these prefixes is really necessary? I looked at compatibility requirements to make it work in older browsers, but it only mentions the -webkit prefix: none of the -moz , -ms or -o prefixes seem necessary for any version of the browser.

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

Answer 1

This appears to be a transparent outline that interferes with the edge of the object. A path is always a square (as you can see, for example, with outline: 1px solid blue; ). I can only assume that using a 1px transparent outline based on an interpolated circular shape causes a rendering problem.

Substitution outline:1px solid transparent; on 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 can’t check if it still removed the jagged edges.

 @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 part of the provider prefix, when I tested locally, I see that IE11 and Edge support animation: spin infinite 4s; without prefix animation: spin infinite 4s; but IE11 still supports -ms-animation . Edge does not support -ms-animation , but supports -webkit-animation - see Will Microsoft Edge use prefixes like -webkit- or -ms-? . Therefore, depending on your target audience of the browser, you can refuse obsolete properties if you want, although I would leave them to everything so old browsers are not excluded.

Note. . I saw that changing the CSS properties in the Edge inspector showed that the calculated border-[top|bottom]-[left|right]-radius sometimes represented a percentage, and sometimes a hard px value. I am not sure if this is related or related to the problem.

Answer 2

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

If your item has a width and height of 40 pixels, set the following properties:

 transform-origin: 20px 20px 20px;