具有负z值的CSS 3D变换html元素不会触发事件 [英] CSS 3D transformed html element with negative z-value doesn't fire events
问题描述
在下面的场景中，我们看到两个div在容器中应用了CSS3 3D变换。
两者都应该在单击事件时触发它们。在这种情况下，会显示一个警告，指示点击了哪个div。
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>
现在的问题是，只有第二个div显示所需的行为。
点击第一个div不会导致显示警报（测试最新的safari，chrome和safari的iOS）。
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).
负的z值从-100px到0px或正值，一切正常。
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?
推荐答案
我之前见过这个问题：
Webkit Mobile不喜欢与3d变换结合的负z-index值。 W3C声明z-index必须是整数 http：// www .w3.org / TR / CSS2 / visuren.html＃z-index ，但在实践中 - 由于Firefox和现在的Webkit的遗留问题，最好坚持使用正数。
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.
这篇关于具有负z值的CSS 3D变换html元素不会触发事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
