Bug 42455 - click event not caught by elements after a negative translateZ
Summary: click event not caught by elements after a negative translateZ
Alias: None
Product: WebKit
Classification: Unclassified
Component: New Bugs (show other bugs)
Version: 528+ (Nightly build)
Hardware: PC Windows XP
: P2 Normal
Assignee: Nobody
Depends on:
Reported: 2010-07-16 07:59 PDT by peter.bannier
Modified: 2012-02-24 10:25 PST (History)
4 users (show)

See Also:

Bug example (1.09 KB, application/octet-stream)
2010-07-16 07:59 PDT, peter.bannier
no flags Details
reduced test case (365 bytes, text/html)
2011-11-06 02:12 PST, Maxwell Terpstra
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description peter.bannier 2010-07-16 07:59:23 PDT
Created attachment 61806 [details]
Bug example

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";
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,
Comment 1 peter.bannier 2010-07-19 01:38:07 PDT
I should add that when I change  -webkit-transform-style: preserve-3d; to  -webkit-transform-style: flat;  everything works fine just as expected.
Comment 2 Fady Samuel 2011-10-21 12:44:43 PDT
(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.
Comment 3 Simon Fraser (smfr) 2011-10-24 11:34:28 PDT
Can we have a test case that doesn't involve PHP please?
Comment 4 Maxwell Terpstra 2011-11-06 02:12:55 PST
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...
Comment 5 Dave 2012-02-24 10:25:05 PST
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?