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线）标志。我做了另外两个div（得分）代表一个应该超过其他元素的元素。第一行是越野车，而第二行则没有。

要查看错误，您只需将光标移到元素上，知道光标在标志上是css pointer，然后是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? Relative Position + Z-Index + Overflow Hidden + CSS3 Transform）

我建议在触发滑动事件之前使用一些Javascript来计算z-index并在“紫色块”上应用更高的值，甚至根本不丢弃CSS转换并仅使用Javascript转换。