2 animated elements stacked on top of each other c

Question

JS FIDDLE

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

The other animation is the particles canvas smoke animation behind the logo that you see while the middle section is flipping.

The problem i have is the canvas smoke animation changes its position and the coin flipping animation goes behind and in front of the smoke canvas animation hiding itself or part of itself like almost its z-index position changes when the flipping animation starts...

This only happens on Iphone and apple devices. but works fine on android and desktop.  If you remove the canvas the flipping animation works great with no issue.. But if the canvas is there it covers up the flip animation once the flip animation begins. 

I cant use my animation until i figure this out though.. Which is making me sad. lol

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

Answer 1

You can try moving the canvas element back in 3D space on its z-axis to avoid the clipping that occurs. For example, add these properties to the 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 is arbitrary in the example above. Play around with them until you find a more useful value, but this is a OK starting point. It's linked to the perspective setting which if set would also have an effect on what value is used for the z-position.

You can probably do fine with use the -webkit- prefixed variants as it only affects Safari, but for future it may be need for the unprefixed as well.

You can also remove the z-index for myCanvas as there is anyways a typo in it, and if corrected if will come on top.

Example fiddle