CSS3 Translate3d鼠标事件问题 [英] CSS3 Translate3d Mouse Events Issue

问题描述

所以，我有一些代码： jsfiddle.net/XNvzW

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

彩色块在3d场景中设置，其中彩色框重叠一点并具有以下z值：10,5,0，-5，-10（数字中的数字）盒子的右上角）。当您将鼠标悬停在某个框上时，颜色会发生变化，您会看到一条消息：将鼠标悬停在＃x.block上。非常简单。

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.

现在，有时负z块工作（并且在CSS中响应鼠标事件：hover和JS中的$ .mouseenter（）），有时候他们没有，这似乎与何时和为何完全不一致。似乎存在某种类型的问题w / TranslateZ属性的负值，W3C甚至在他们如何使用Z的示例中使用负值。相关的一个 stackoverflow问题，我发现似乎没有得到太多的讨论或答案解决这个问题。

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.

想法？

我应该补充一点，这似乎在Internet Explorer 9.0中运行良好，但不是在基于WebKit的浏览器中。

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

找到这个在WebKit中提交的错误（但这不完全是我发生的事情）

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

推荐答案

将一个正的translateZ添加到剪切对象的父级以补偿负值：在这种情况下 -webkit-transform：translate3d（0px，0px，10px）; 到父 #stage div。这会转换（z：0）浏览器平面上方的项目，当div相对于浏览器Z平面（body元素）变为负数时，它会停止点击和悬停事件。这似乎只发生在Chrome和Safari（以及移动版Safari）中。如果你认为身体是最后一个事件处理程序，我认为这不一定是一个错误。

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.

你可以看到这个在行动：在你的jsfiddle，如果你只翻译Z #stage 到5px你会看到-5px div现在可以工作，但-10px div仍然没有。

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.

这篇关于CSS3 Translate3d鼠标事件问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！