CSS3 Translate3d Mouse Events Issue

Question

So, I’ve got this bit of code: jsfiddle.net/XNvzW

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 stackoverflow question that I found didn’t seem to get much discussion or an answer solving the issue.

Thoughts?

I should add, that this seems to work fine in Internet Explorer 9.0, but not in WebKit-based browsers.

Found this bug filed in WebKit (but it's not exactly what I have going on)

Answer 1

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.