Wobbly CSS Animation mit Border-Radius im Internet Explorer

Question

Im Internet Explorer scheint diese Animation zu wackeln. Ich las die Antwort auf this question und sie ließen es klingen, als ob es möglich ist, zu beheben.

Ich kann ein Bild nicht wirklich verwenden, da der Rahmenradius nicht konstant ist, und ich würde es vorziehen, kein animiertes GIF zu verwenden.

Ich verstehe "Wobble" ist keine sehr gute Beschreibung, aber ich kann nicht mit anderen Worten, um es zu beschreiben. Ich habe es nicht mit Opera/Safari getestet, also wenn Sie eines von beiden haben, würde ich gerne wissen, ob sie korrekt angezeigt werden oder auch das Problem haben. Bitte führen Sie das folgende Snippet in Chrome/Firefox und vergleichen Sie es mit dem Snippet in Internet Explorer:

@keyframes spin{ 
 
\t 0% {transform:rotateZ(0deg);} 
 
\t 50% {transform:rotateZ(360deg);border-radius:60%;} 
 
\t 100%{transform:rotateZ(720deg);} 
 
} 
 
@-webkit-keyframes spin{ 
 
\t 0% {transform:rotateZ(0deg);} 
 
\t 50% {transform:rotateZ(360deg);border-radius:60%;} 
 
\t 100%{transform:rotateZ(720deg);} 
 
} 
 
@-moz-keyframes spin{ 
 
\t 0% {transform:rotateZ(0deg);} 
 
\t 50% {transform:rotateZ(360deg);border-radius:60%;} 
 
\t 100%{transform:rotateZ(720deg);} 
 
} 
 
@-ms-keyframes spin{ 
 
\t 0% {transform:rotateZ(0deg);} 
 
\t 50% {transform:rotateZ(360deg);border-radius:60%;} 
 
\t 100%{transform:rotateZ(720deg);} 
 
} 
 
@-o-keyframes spin{ 
 
\t 0% {transform:rotateZ(0deg);} 
 
\t 50% {transform:rotateZ(360deg);border-radius:60%;} 
 
\t 100%{transform:rotateZ(720deg);} 
 
} 
 
#spinme{ 
 
\t display:inline-block; 
 
\t position:relative; 
 
\t left:0; 
 
\t top:0; 
 
\t margin:0.2rem; 
 
\t width:0.8rem; 
 
\t height:0.8rem; 
 
\t border:0.2rem solid black; 
 
\t border-radius:0; 
 
\t outline: 1px solid transparent; /* require to remove jagged edges in firefox */ 
 
\t transform:rotateZ(0deg); 
 
\t animation: spin infinite 4s; 
 
\t -webkit-animation: spin infinite 4s; 
 
\t -moz-animation: spin infinite 4s; 
 
\t -ms-animation: spin infinite 4s; 
 
\t -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>

Der outline Hack die scharfe Kante kam von this answer zu beheben.

---

Als eine Nebenfrage, und aus Neugier, welche dieser Präfixe sind eigentlich erforderlich? Ich schaute auf die compatibility requirements, um es in älteren Browsern zu funktionieren, aber es erwähnt immer nur das -webkit Präfix: keines der -moz, -ms oder -o Präfixe scheinen für jede Browser-Version benötigt werden.

Ich habe auch gerade überprüft shouldiprefix und sie scheinen mit caniuse übereinzustimmen, aber gegeben, wie ähnlich die Namen sind, dachte ich, dass die gleiche Gemeinschaft/Firma beide Websites laufen kann. Sollte ich nur die anderen Präfixe entfernen?

Answer 1

Es sieht so aus, als ob der transparente Umriss die Kante des Objekts stört. Der Umriss ist immer ein Quadrat (wie Sie z. B. mit outline: 1px solid blue; sehen können). Ich kann nur annehmen, dass die Verwendung eines 1px-transparenten Umrisses über eine interpolierte Kreisform das Rendering-Problem verursacht.

Ersetzen outline:1px solid transparent; mit outline:1px solid rgba(255, 255, 255, 0);oderoutline:0 solid transparent; Fixes Kanten- und IE11 für mich. Ich habe keinen Firefox, also kann ich nicht testen, ob damit auch die gezackten Ränder noch entfernt wurden.

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

Wie für den Verkäufer Präfixteil, wenn ich lokal Prüfung wurde ich sehe, daß IE11 und Edge-sowohl die Vorsilbe lose animation: spin infinite 4s; unterstützen, aber noch unterstützt IE11 -ms-animation. Edge unterstützt -ms-animation nicht, unterstützt aber -webkit-animation - siehe Will Microsoft Edge use prefixes like -webkit- or -ms-?. Abhängig von der Zielbrowser-Zielgruppe können Sie auf Wunsch veraltete Eigenschaften auslassen, obwohl ich sie alle vorläufig belassen würde, damit ältere Browser nicht ausgeschlossen werden.

Hinweis: Ich habe, dass Makel CSS-Eigenschaften im Edge-Inspektoren zeigten die berechneten border-[top|bottom]-[left|right]-radius Eigenschaften waren manchmal ein Prozentsatz und manchmal ein harter px Wert. Ich bin mir nicht sicher, ob das mit dem Problem zusammenhängt oder relevant ist.

Answer 2

Um den Fehler IE Internet Explorer zu beheben, wo rotierende Dinge ein Wobble verursacht, versuchen Sie es.Die Transform-Herkunft sollte in allen Dimensionen (x, y und z) auf die halbe Breite eingestellt werden.

Wenn Ihr Element 40px breit und hoch ist, legen Sie die Eigenschaften wie folgt aus:

transform-origin: 20px 20px 20px;