Question

我的程序使用Chrome，Firefox，Opera使用桌面。它适用于我的Android手机。我想让它在iPad上运行。它不适用于iPad上的桌面Safari或Chrome，因此它是iPad上的Safari和Chrome。

该程序动态创建画布元素。在某些时候，某些元素在动画中旋转，然后重新定位在其他元素上。这涉及使用JavaScript更改zIndex值。该计划在此处：http://faculty.purchase.edu/jeanine.meyer/twisttest.html

代码执行旋转后（确实有效）：

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)";
}

然后这似乎无法改变zIndex值（在桌面Safari或iPad Safari或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";

}

有些元素没问题，有些则没有。

注意：以下内容适用于台式机和iPad以及Android手机：http://faculty.purchase.edu/jeanine.meyer/braid.html

Answer 1

正如another answer指出的那样，当this bug启用3d z-index时，此transform无效。

可能的解决方案

是应用-webkit-transform: rotateY(ANG_DEG) translate3d(0,0, Z_IDX)转换，因此您基本上将使用3d空间中的z - 深度来定位元素。

所以在你的应该是这样的：

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

仅适用于ipad。

注意

iPad上的Chrome使用与Safari相同的渲染引擎，因此两种浏览器之间没有太大区别。

JavaScript zindex旋转Safari桌面和iPad

1 个答案:

可能的解决方案

注意