具有负z值的CSS 3D转换的HTML元素不会触发事件 [英] CSS 3D transformed html element with negative z-value doesn't fire events
问题描述
在下面的情况下，我们看到两个在容器内应用了CSS3 3D转换的div。
当它们被点击时，都应该触发一个事件。在这种情况下，会显示一个警报，指示哪个div被点击。
<！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上测试）。
一旦我更改这个负数z值从-100px到0px或正值，一切正常。
这是浏览器的错误吗？
有没有办法实现所需的行为？
我以前看过这个问题： p>
Webkit Mobile不喜欢负z指数值加上3d变换。 W3C指出，z-index必须是一个整数。 http：// www.w3.org/TR/CSS2/visuren.html#z-index ，但在实践中 - 由于Firefox和现在的Webkit的遗留问题，最好坚持正数。
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?
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.
这篇关于具有负z值的CSS 3D转换的HTML元素不会触发事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
