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. Click开发者_运维百科s 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?
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.
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.
On parent DIV, change -webkit-transform-style: preserve-3d; to -webkit-transform-style: flat; it works fine for me.
加载中,请稍侯......
精彩评论