2 elementos animados astackdos uno encima del otro cambiando (position del índice z) al animar en dispositivos IOS?

JS FIDDLE

Tengo 2 elementos animados. Uno es un simple script de rotation que rota la parte media del logotipo como una moneda.

La otra animation es la animation de humo de lona de partículas detrás del logotipo que ves mientras la sección central está girando.

El problema que tengo es la animation de humo de canvas cambia su position y la animation de voltear la moneda va detrás y delante de la animation de canvas de humo escondiéndose o parte de sí misma como casi su position de índice z cambia cuando comienza la animation …

Esto solo sucede en dispositivos iPhone y Apple . pero funciona bien en Android y escritorio. Si quitas el canvas, la animation de voltear funciona bien sin ningún problema … Pero si el canvas está allí, cubre la animation de voltear una vez que comienza la animation de voltear.

No puedo usar mi animation hasta que me doy count de esto … Lo que me está haciendo triste. jajaja

¡Cualquier ayuda es muy apreciada! Mira mi JS FIDDLE completo

introduzca la descripción de la imagen aquí

Puede intentar mover el elemento de canvas nuevamente en el espacio 3D en su eje z para evitar el recorte que se produce. Por ejemplo, agregue estas properties a las reglas de CSS:

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

Los numbers -20000 para translateZ son arbitrarios en el ejemplo anterior. Juega con ellos hasta que encuentres un valor más útil, pero este es un buen punto de partida. Está vinculado a la configuration de perspectiva que, si se establece, también tendría un efecto sobre el valor que se usa para la position z.

Probablemente pueda hacerlo bien con el uso de las variantes prefijadas -webkit-, ya que solo afecta a Safari, pero en el futuro también puede ser necesario para el prefijo.

También puede eliminar el índice z para myCanvas, ya que de todas forms hay un error tipográfico, y si se corrige, si llegará a la cima.

Ejemplo de violín