CSS3转换具有随机的z-index / depth

Question

也许我在CSS3中发现了一个Bug，或者这是一个简单的错误...

这是我正在处理的页面： http : //robocup2014.herokuapp.com/views/view/52e9bbb2e22d2402003d1ef1

我可能无法显示该错误，因为它的行为是完全随机的...但是，这是发生的情况：

该标志应始终位于该紫色布局的后面。 但是，它有时在顶部，有时在下面。 有时，它位于顶部而位于其下方（没有在javascript上运行的任何代码），或者它位于顶部而出乎意料。 有时，在进行动画处理时，它位于下方，然后在动画的结尾处位于顶部，但是后来，它位于下方。

我的意思是：它是随机的，它是一个无聊的错误，没有任何模式。 （我已经计算了时间，计算了动画的迭代次数...）。

那么，有谁知道如何防止这种情况发生？ 这是一张图片，以防在您的窗口中出现错误。 （在Safari和Chrome上发生）

Answer 1

我最近不得不找出相同的问题和transform: translate3d(0,0,0); 解决方案对我不起作用。

事实是z-index只是将元素堆叠在2D世界中，因此，由于您使用3D转换，因此z-index无法应用。

所以真正的问题是恕我直言：

如何在3D世界中堆叠元素？

答：

使用Z轴！

这样做很简单，但是由于浏览器的呈现而不直观。 我做了一个JSFiddle试图说明它。 我试图通过您的页面中的代码来尽可能地匹配您的情况，这很难。 在这个小提琴中，您有四个（2行2行）标记。 我做了另外2个div（分数），表示应位于其他元素之上的元素。 第一行不是越野车，而第二行不是。

要查看该错误，只需将光标移到某个元素上，就知道光标是该标志上的css pointer ，并且是css col-resize 。 您会看到，当您将绿色元素从左向右悬停时，光标会发生变化。

我提出了一些模式（是的，它们很丑陋；））来说明问题。 这是我们浏览器所表示的元素（在我看来）：

我认为问题现在更容易看到。 在右边，绿色就是蓝色，这就是我们想要的。 但是，在左侧， rotateY()导致蓝色元素“移出屏幕”，越过绿色元素。 如果不清楚，请从上方查看此视图​​：

我们可以认为蓝色元素超出了屏幕尺寸的一半。 因此，我找到了解决方案（我认为这可能不是最佳解决方案，但这项工作可行，并且是跨浏览器的，因为您使用浏览器自己的transform实现，例如-webkit-transform 。

滚动到小提琴的第二行，将鼠标悬停在绿色元素上，然后看到光标保持不变，但是我们完全失去了蓝色元素上的光标pointer 。 我“只是”将Z轴上的蓝色元素转换为-10000px，以确保它很远并且旋转时不会“离开屏幕”。 注意这里重要的顺序，首先是平移translate3d(0, 0, -10000px) ，然后是透视图，最后是旋转： transform: translate3d(0, 0, -10000px) perspective(1200px) rotateY(-45deg); 。 正如您在我的上一个架构（从上方）看到的：

现在，蓝色元素距离较远，不会越过绿色元素。 我们可以看到的最后一个问题是，如果蓝色元素大于10000像素，它将再次超过绿色元素。

总之，我确信此解决方案比实际解决方案更能解决问题。 但这对我来说很有用，希望我不会摆脱您最初的问题，对您有帮助。

Answer 2

您可以与我们共享浏览器版本吗？ 我没有在最新版本的Chrome或Safari或Firefox上看到它。

可能与此错误有关： https : //bugs.webkit.org/show_bug.cgi?id=61824

您可以尝试将其添加到平面项目中：

transform: translate3d(0,0,0);

这样一来，所有对象都将以3D元素进行处理，并且发现错误的机会更少。

另外，您应该使用所有浏览器前缀。 我完全看不到Firefox上的转换，因此也无法确定在该浏览器上是否也存在问题。

Answer 3

我无法在Chrome，Safari或Firefox中重现该错误。 我在stackoverflow中发现了类似的问题，可能适用于您的情况（ Complex Webkit Bug？相对位置+ Z-Index +隐藏的溢出+ CSS3转换 ）

我建议尽管在触发滑动事件之前使用一些Javascript，以便计算z-index并在“紫色块”上应用更高的值，甚至完全放弃CSS转换，而仅使用Javascript转换。