Wobbly анимация CSS с радиусом границы в Internet Explorer

В Internet Explorer эта анимация, по-видимому, колеблется. Я читал ответ на этот вопрос, и они звучали так, как будто можно исправить.

Я не могу использовать изображение, поскольку радиус границы не является постоянным, и я бы предпочел не использовать анимированный gif.

Я понимаю, что "wobble" - не очень хорошее описание, но я не могу придумать никаких других слов, чтобы описать это. Я не тестировал его с помощью Opera/Safari, поэтому, если у вас есть какой-либо из них, я бы хотел знать, правильно ли они отображаются или же проблема. Запустите следующий фрагмент в Chrome/Firefox и сравните его с фрагментом в 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>

Ответ 1

Похоже, что это прозрачный контур, мешающий краю объекта. Контур всегда является квадратом (как вы можете видеть, например, с помощью outline: 1px solid blue;). Я могу только предположить, что использование 1px прозрачного контура на основе интерполированной круговой формы вызывает проблему рендеринга.

Замена outline:1px solid transparent; на outline:1px solid rgba(255, 255, 255, 0); или outline:0 solid transparent; исправляет Edge и IE11 для меня. У меня нет Firefox, поэтому я не могу проверить, удалили ли это все еще неровные края.

@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>

Ответ 2

Чтобы исправить ошибку IE Internet Explorer, где вращающиеся вещи приводят к колебанию, попробуйте это. Значение transform-origin должно быть установлено на половину ширины во всех измерениях (x, y и z).

Если ваш элемент имеет ширину и высоту 40 пикселей, задайте следующие свойства:

transform-origin: 20px 20px 20px;