javascript Canvas particle animation causes error in overlapping animation on IOS devices.

[PortalPacific]

Hey guys! I am having an problem and thought someone here might be able to help.
 

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 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.

Any help is much appreciated! Check out my full JS FIDDLE to see my code and a live example. 

[PortalPacific]

I actually solved this issue. Request to delete topic. 

[Seahorsepip Veteran]

Might it not be better to just save the particles shown as a png and move this around instead of generating particles behind the logo?

Generating particles in this example seems a bit overkill to me