CSS3 Translate3d鼠標事件問題

Question

所以，我有這段代碼：jsfiddle.net/XNvzW

彩色塊是在3D場景中的彩色框重疊了一下，有以下z值設置：10， 5，0，-5，-10（方框右上角的數字）。當您將鼠標懸停在框上時，顏色會發生變化，您會看到一條消息：在＃x.block上方懸停。很簡單。

現在，有時候z塊會產生負面作用（並響應鼠標事件，在CSS中使用：懸停和JS中使用$ .mouseenter（）），有時它們不會，它似乎完全不一致爲什麼。似乎有一些問題與TranslateZ屬性的負值有關，W3C甚至在他們如何使用Z的例子中使用負值。我發現的一個相關的 stackoverflow question似乎沒有得到太多討論或解決問題的答案。

想法？

我應該補充一點，這似乎在Internet Explorer 9.0中正常工作，但在基於WebKit的瀏覽器中不起作用。

找到this bug filed in WebKit（但它不正是我要去上）

Answer 1

添加一個積極的translateZ到裁剪對象的父，以彌補負值：在這種情況下-webkit-transform: translate3d(0px,0px,10px);父#stage股利。這將轉換（z：0）瀏覽器平面上方的項目，當div相對於瀏覽器Z平面（body元素）變爲負值時，這將停止點擊和懸停事件。這似乎只發生在Chrome和Safari（以及移動Safari）中。如果你認爲身體是最後一個事件處理程序，我不相信它是一個錯誤。

你可以看到這個行動：在你的jsfiddle，如果你只翻譯Z #stage爲5px，你會看到-5px div現在可以工作，但-10px div仍然沒有。