JavaScript zindex rotation Safari desktop and iPad

Question

My program works using the desktop using Chrome, Firefox, Opera. It does work on my Android phone. I want it to work on iPad. It does not work on desktop Safari or Chrome on the iPad, so it is Safari AND Chrome on the iPad.

The program dynamically creates canvas elements. At some point, certain of the elements are rotated in an animation and then re-positioned over other elements. This involves changing zIndex values using JavaScript. The program is here: http://faculty.purchase.edu/jeanine.meyer/twisttest.html

After code doing rotation (that does work):

for (var ci=currentseg;ci<NoS;ci++) {
   c = strandCanvases[sB][ci];
   c.style.webkitTransform = "rotateY("+degree+"deg)";
   c.style.MozTransform = "rotateY("+degree+"deg)";
   c.style.msTransform = "rotateY("+degree+"deg)";
   c.style.OTransform = "rotateY("+degree+"deg)";
   c.style.transform = "rotateY("+degree+"deg)";
}

then this doesn't work appear to change the zIndex values (on desktop Safari or iPad Safari or Chrome)

for(var i=0;i<NoSX;i++) {
   sAcanseg = strandCanvases[sAnow][segN+i];
   sBcanseg = strandCanvases[sBnow][segN+i];
    ...

   sBcanseg.style.zIndex = "100";
   sAcanseg.style.zIndex = "0";

}

Some of the elements are okay and some are not.

Note: the following does work fine on desktop and iPad and Android phone: http://faculty.purchase.edu/jeanine.meyer/braid.html

score 0 · Answer 1 · edited May 23 '17 at 10:26

As another answer points it out, this z-index is not working when 3d transforms are enabled possibly due to this bug.

Possible solution

is to apply -webkit-transform: rotateY(ANG_DEG) translate3d(0,0, Z_IDX) transformation, so you basically will use the z-depth in the 3d space to position your elements.

So in your it should be something like:

c.style.webkitTransform = "rotateY("+degree+"deg) translate3D(0,0, " + zValue + ")";

and only for the ipad.

Note

Chrome on iPad uses the same rendering engine as Safari, so there is not much difference between the two browsers.

JavaScript zindex rotation Safari desktop and iPad

1 Answers1

Possible solution

Note