So, I’ve got this bit of code: <a href="http://jsfiddle.net/XNvzW" rel="nofollow">jsfiddle.net/XNvzW</a>
The colored blocks are setup in a 3d scene where the colored boxes overlap a bit and have the following z-values: 10, 5, 0, -5, -10 (the numbers in the upper right corners of the boxes). When you hover over a box, the color changes and you’ll see a message saying: hovering over #x.block. Pretty simple.
Now, sometimes the negative z blocks work (and respond to mouse events, both in CSS with :hover and in JS with $.mouseenter()), and sometimes they don’t, it’s seems entirely inconsistent as to when and why. There seems to be some sort of issue w/ the negative value of the TranslateZ property, the W3C even uses a negative value in their example of how one would use Z. The one relevant <a href="https://stackoverflow.com/questions/6751137/css-3d-transformed-html-element-with-negative-z-value-doesnt-fire-events" rel="nofollow"> stackoverflow question </a> that I found didn’t seem to get much discussion or an answer solving the issue.
I should add, that this seems to work fine in Internet Explorer 9.0, but not in WebKit-based browsers.
Found <a href="https://bugs.webkit.org/show_bug.cgi?id=42455" rel="nofollow">this bug filed in WebKit</a> (but it's not exactly what I have going on)Answer1:
Add a positive translateZ to the clipped object's parent to compensate for the negative value: in this case
-webkit-transform: translate3d(0px,0px,10px); to the parent
#stage div. This translates the items above the (z:0) browser plane, which is stopping click and hover events when the div goes negative relative to the browser Z plane (the body element). This only appears to happen in Chrome and Safari (and in mobile Safari as well). I don't believe it is necessarily a bug if you think of the body as the last event handler.
You can see this in action: on your jsfiddle, if you only translateZ
#stage to 5px you'll see the -5px div now works but the -10px div still does not.