CSS 3D立方体向侧面旋转，旋转90度时父元素错误地位于曲面上方，但旋转89.9度时不正确

在Chrome中，我试图旋转一个立方体，但在那之后，侧面突然变得不难处理，父元素似乎优先。 但是，当我使该元素

指针事件：none

时，

body

标记是第一个元素，因此由于某种原因，在旋转

90度之后，它会失去其交互作用

然而，当我只旋转它
89.9度
时，没有问题，我可以与侧面的元素交互，我尝试了摆弄
translateZ
，但这没有帮助

我在这里重新创建了它：

和，在firefox中，它可以正常工作

任何熟悉此错误/差异的人以及如何修复它

-
我旋转的容器元素似乎失去了所有的交互作用，因为容器元素在inspector中是一个平面，它容纳了3d元素，因此从侧面看平面上没有交互作用

更新：（89.9度仍然有效…
您正受到舍入错误和Chrome处理命中测试的组合的影响（至少有-该漏洞没有关闭，最近登陆的补丁没有修复您的案例）

作为参考，这里有一个简化版的fiddle，删除了额外的html和css：

修正，备选方案1
您正在指定

.show-right {
    -webkit-transform: rotate3d(0, 1, 0, -90deg);
    ...
}

但是如果你在开发者工具中检查计算样式，你会发现它是

-webkit-transform: matrix3d(0.00000000000000006123233995736766, 0, 1, 0,
                            0, 1, 0, 0, -1,
                            0, 0.00000000000000006123233995736766, 0, 0, 0, 0, 1);

这将导致旋转的div和按钮以3d z顺序位于主体下方。如果将
旋转3d
替换为

.show-right {
    -webkit-transform: matrix3d(0, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 0, 1);
    ...
}

命中测试将起作用（参见原始版本和简化版本）

修正，备选方案2
（我不清楚为什么会这样，但是）

在旋转元素的父元素上设置
（-webkit-）透视图
：

.view {
    -webkit-perspective: 100000px;
}

见（原件，简体）

但这会导致按钮闪烁。
这似乎是Chrome的一个错误，我在3D中多次遇到它。除了像
89.9deg
或
指针事件：none这样的黑客之外，没有其他方法。同样的问题在这里：这里：@AurélienGrimpard所说的是真的。这是一个渲染错误，没有什么可以说的了。另外，您的演示中有很多不必要的CSS。这使得我们很难看到到底应用了什么，尽管它最终还是一个bug，+500感谢您的努力，谢谢！很抱歉弄得一团糟，但我已经花了至少一个小时，当我决定检查另一个浏览器时。。。