2 animierte Elemente, die übereinander gestapelt sind (z-Index-Position), wenn auf IOS-Geräten animiert wird?

Question

JS FIDDLE

Ich habe 2 animierte Elemente. Eines ist ein einfaches Rotationsskript, das den mittleren Teil des Logos wie eine Münze dreht.

Die andere Animation ist die Partikel-Leinwand-Rauch-Animation hinter dem Logo, das Sie sehen, während der mittlere Abschnitt sich dreht.

Das Problem, das ich habe, ist die Leinwand Rauch Animation ändert seine Position und die Münze spiegeln Animation geht hinter und vor der Rauch Leinwand Animation versteckt sich selbst oder ein Teil von sich wie fast seine Z-Index-Position ändert sich, wenn die spiegeln Animation beginnt ...

Dies geschieht nur auf Iphone und Apple-Geräte. funktioniert aber gut auf Android und Desktop. Wenn Sie die Zeichenfläche entfernen, funktioniert die Spiegelungsanimation ohne Probleme. Aber wenn die Zeichenfläche vorhanden ist, wird die Spiegelungsanimation verdeckt, sobald die Spiegelungsanimation beginnt.

Ich kann meine Animation nicht nutzen, bis ich das herausgefunden habe .. Was mich traurig macht. lol

Jede Hilfe wird sehr geschätzt! Sehen Sie sich meine volle JS FIDDLE

Answer 1

Sie können versuchen, das Canvas-Element zurück in 3D-Raum bewegt auf seine z-Achse den Ausschnitt zu vermeiden, die auftritt. Zum Beispiel, um diese Eigenschaften zu den CSS-Regeln hinzufügen:

.animateVSS{ 
    /* ... */ 
    -webkit-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
} 

#myCanvas{ 
    /* ... */ 
    -webkit-transform: translateZ(-20000px) rotateY(0.1deg); 
    transform: translateZ(-20000px) rotateY(0.1deg); 
} 

Die Zahlen -20000 für translateZ ist beliebig im Beispiel oben. Spielen Sie mit ihnen herum, bis Sie einen nützlicheren Wert finden, aber das ist ein guter Ausgangspunkt. Es ist mit der Einstellung perspective verknüpft, die, wenn sie festgelegt wird, auch Auswirkungen darauf hat, welcher Wert für die Z-Position verwendet wird.

Sie können wahrscheinlich mit der Option -webkit-Präfixe gut tun, da es nur Safari betrifft, aber für die Zukunft kann es erforderlich sein, auch die Präfixe.

Sie können den Z-Index für myCanvas auch entfernen, da es immer einen Tippfehler enthält, und wenn korrigiert, wenn oben.

Example fiddle