CSS 3D transformed html element with negative z-value doesn't fire events

问题

In the following scenario, we see two divs with applied CSS3 3D transformations within a container. Both should fire a event when they are clicked. In this case an alert is shown, indicating which div was clicked.

<!DOCTYPE html>
<html>
<body>
  <div style="-webkit-perspective: 600; -webkit-transform-style: preserve-3d; width: 500px; height: 200px; overflow: hidden;">
    <div onclick="alert('1');" style="-webkit-transform: translate3d(0px, 0px, -100px); background-color: blue; position: absolute; width: 100px; height: 100px;">
    </div>
    <div onclick="alert('2');" style="-webkit-transform: translate3d(200px, 0px, 100px); background-color: red; position: absolute; width: 100px; height: 100px;">
    </div>
  </div>
</body>
</html>

The problem is now, that only the second div shows the desired behavior. Clicks on the first div don't result in as shown alert (tested on the latest safari, chrome and safari iOS).

As soon as I change the negative z value from -100px to 0px or a positive value, everything works fine.

Is this a bug of the browser? And is there any way to achieve the desired behaviour?

回答1:

I've seen this problem before:

CSS3 transition problem on iOS devices

Webkit Mobile doesn't like negative z-index values coupled with 3d transforms. The W3C states that the z-index must be an integer http://www.w3.org/TR/CSS2/visuren.html#z-index, but in practice—because of legacy issues with Firefox and now Webkit— it's better to stick to positive numbers.

回答2:

Add a positive translateZ to the clipped object's parent element to compensate for the negative value of the child. This translates the items above the body element's (z:0) browser plane, which is stopping click and hover events when the div goes negative relative to the browser Z plane. 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.

回答3:

On parent DIV, change -webkit-transform-style: preserve-3d; to -webkit-transform-style: flat; it works fine for me.

来源：https://stackoverflow.com/questions/6751137/css-3d-transformed-html-element-with-negative-z-value-doesnt-fire-events

标签

events

html5

css3

translate3d