Bug 42455 - click event not caught by elements after a negative translateZ
: click event not caught by elements after a negative translateZ
Status: UNCONFIRMED
: WebKit
New Bugs
: 528+ (Nightly build)
: PC Windows XP
: P2 Normal
Assigned To:
:
:
:
:
  Show dependency treegraph
 
Reported: 2010-07-16 07:59 PST by
Modified: 2012-02-24 10:25 PST (History)


Attachments
Bug example (1.09 KB, application/octet-stream)
2010-07-16 07:59 PST, 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 From 2010-07-16 07:59:23 PST
Created an attachment (id=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,
------- Comment #1 From 2010-07-19 01:38:07 PST -------
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 From 2011-10-21 12:44:43 PST -------
(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 From 2011-10-24 11:34:28 PST -------
Can we have a test case that doesn't involve PHP please?
------- Comment #4 From 2011-11-06 02:12:55 PST -------
Created an attachment (id=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 From 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?