Wie funktioniert die CSS-Eigenschaftsanimation in Safari wie in Google Chrome?

Question

Ich habe ein Problem mit der CSS-Animation.

In meinem Projekt muss ich hinzufügen, @keyframes Stil Objekt und Animationseigenschaft zu Stil einiger DIVs von JavaScript. Hier

<div class="a1" style="animation: d 3.2s linear infinite;"> 
    <div class="b1" style="animation: e 3.2s linear infinite;"></div> 
</div> 

ist ein Beispiel für die Aufgabe: https://jsfiddle.net/gcfzf8q4/5/

Dieses Beispiel funktioniert einwandfrei in Google Chrome.

In Safari (nach Version 9) bewegt sich das grüne Rechteck nicht oder es bewegt sich mit einer seltsamen Flugbahn.

Frage

Wie kann ich die Ergebnisse erreiche ich in Chrome in Safari bekommen?

Answer 1

Es scheint ein seltsamer Safari Bug/Inkonsistenz zu sein. Ich konnte das umgehen, indem ich das Animationsstyling der div über JavaScript anstelle von HTML einstellte. Der Schlüssel hier ist, dass Sie dem Browser sagen, nach der Animation zu suchen, nachdem sie durch die appendChild Anrufe definiert worden ist.

// ... omitted some code for length, see jsfiddle in question ... 

var style = document.createElement('style'); 
document.body.appendChild(style); 
style.appendChild(rule1); 
style.appendChild(rule2); 

var a1 = document.getElementsByClassName("a1")[0]; 
var b1 = document.getElementsByClassName("b1")[0]; 
a1.style = "animation: d 3.2s linear infinite;"; 
b1.style = "animation: e 3.2s linear infinite;";