Created attachment 61806 [details] Bug example Hi! I can't figure out what's the real problem ... When I do a negative translateZ on a div which has : - a specific className - an onclick eventListener attached to it. Here is the portion : var eDIV = document.createElement('div'); eDIV.className = "cube"; document.getElementById('environment').appendChild(eDIV); eDIV.style.webkitTransform = 'translateZ(-100px)'; eDIV.addEventListener( 'click',function(){console.log(this.className);}, false ); Well, when I click on the div, no clickEvent is caught ... to be more precise I should add that sometimes it works as expected !! what I find really strange ... Does anyone has a clue about what's going on' ? I attached a zip file containing the source code in order to reproduce the problem ... thanks in advance,
I should add that when I change -webkit-transform-style: preserve-3d; to -webkit-transform-style: flat; everything works fine just as expected.
(In reply to comment #1) > I should add that when I change -webkit-transform-style: preserve-3d; to -webkit-transform-style: flat; everything works fine just as expected. This bug seems to still be repro'able, looking into it.
Can we have a test case that doesn't involve PHP please?
Created attachment 113780 [details] reduced test case Reduced test case. When an element is translated negatively in z and its parent does _not_ have -webkit-transform-style:preserve-3d, it will not receive mouse events (they will go to the parent instead) and can never be matched by the :hover pseudoclass. The CSS Transforms spec doesn't say whether or not this is expected behaviour. However, sometimes it "works" anyway. Very rarely when this test case is loaded, clicks events and :hover will still go to the negative-z element! Referencing a non-existant stylesheet in the head seems to make this happen more reliably, although still not all the time. Usually when it does happen, the red DIV noticeably flickers when the page loads. Interestingly, referencing a non-existance stylesheet also makes the text in the DIV disappear as long as the document is not loaded via the file:// protocol...
Hi, I seem to be running into this bug as well, I have a mix of positive and negative z-axis objects with hover states, I boiled it down into an example here: http://jsfiddle.net/XNvzW/ I have noticed that, if the mouse is moving while the page is loading, the bug does not appear and mouse events (hover in this case) work. And when the mouse is still during page load, the bug is present. This move/no-move behavior seems to work consistently. Does anyone have any insight?