Do 2 animated elements located one above the other change (z-index position) when animating on iOS devices?

Question

JS FIDDLE

I have 2 animated elements. One of them is a simple rotation of the script, which rotates the middle part of the logo like a coin.

Another animation is the animation of the smoke cubes of particles behind the logo that you see when the middle part is scrolling.

The problem is that the animation of smoke in the canvas changes its position, and the animation of turning the coins goes behind, and itself or part of itself is hidden before the animation of the smoke canvas, as its z-index position almost changes when the flipping animation starts ...

This only happens on Iphone and Apple devices . but works great on Android and on the desktop. If you delete the canvas, flipping animation works fine without problems. But if the canvas is there, it closes the flip animation after the start of the flip animation.

I cannot use my animation until I find out about it. What makes me sad. lol

Any help is much appreciated! Check out my full JS FIDDLE

Answer 1

You can try moving the canvas element back into 3D space on its z axis to avoid cropping. For example, add these properties to CSS rules:

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

The numbers -20000 for translateZ are arbitrary in the above example. Play with them until you find a more useful value, but this is the starting point of OK. It is associated with the perspective parameter, which, if set up, will also affect what value is used for the z-position.

You can probably do your best using the -webkit-prefixed options, as this only affects Safari, but for the future you might also need a non-fixed one.

You can also remove the z-index for myCanvas, since it has a typo in it, and if fixed, if it appears on top.

Violin example