javascript - Z-Index 在 Chrome 和 Safari 中表现不同

Question

我一直在研究 3D 作品 http://jsbin.com/vihoye/3/edit?html,output

除了我的最后一个障碍外，它是完美的。由于某些原因，Z-index 在 Chrome 和 Safari 中的表现不同。这里有两处错误，但都是定位问题。

问题 #1

太阳系由右下方的菜单控制。当你点击说“生活技能”时，地球上会弹出信息对话框。在 FireFox 中，当您将鼠标悬停在对话上时，它会触发一个弹出窗口。但是在 Chrome 和 Safari 中我无法触发鼠标悬停事件。

问题 #2

在 FireFox 中，一旦鼠标悬停事件被触发，弹出窗口就会出现在太阳系的顶部。但是，在 Chrome 和 Safari 中，行星会通过弹出窗口旋转。

我不知道是 position 属性还是 rotateY 导致了问题。

有什么建议吗？预先感谢您的帮助。

Answer 1

好的，这是我的解决方案 DEMO JS Bin .它在 Chrome 中运行完美，但在 Safari 中，行星仍然通过弹出窗口旋转。更多的调试，它可能是可以修复的，但它并不是一个异常糟糕的问题。

我只是相应地更改了这个 CSS ID:

#galaxy {
    position: fixed;
    width: 100%;
    height: 100%;
    perspective: 4000;
    -webkit-perspective; 4000;
}