3

I've got an a tag, which links to another page. When the user clicks on this link, I have a mouseDown event fire, which applies a little translateZ to the element.

Strangely though, after the translateZ, the mouse up or click event (which relies on mouseup) doesn't fire.

Seems to work fine in Firefox, but not chrome.

Here is a little jsfiddle showing my problem: http://jsfiddle.net/8LMzb/9/

Tim
  • 5,732
  • 2
  • 27
  • 35
  • http://stackoverflow.com/questions/15786891/browser-sometimes-ignores-a-jquery-click-event-during-a-css3-transform helped me. – nilgun Oct 27 '13 at 11:12

3 Answers3

4

If you give the parent object a positive translateZ more than the affected child, the links may begin working again as they may have gotten clipped below the browser plane. Sometimes this causes entire translated divs to disappear as well.

Richard
  • 333
  • 3
  • 7
  • 1
    Me too, good job, also worth pointing out that a translateZ of 0 qualifies, it can introduce an additional problem regarding text rendering though (my text went slightly lighter). I care less about that though. – Steve Jan 30 '13 at 09:35
1

It's seems to be a bug with tile.style.webkitTransform = "perspective(800px) translateZ( -30px )"; in MouseDown() event.
After translateZ( -30px ) (NB argument with the negative amount of pixels) the element responds to nothing. If you try translateZ( 30px ) everything will work fine.

http://jsfiddle.net/8LMzb/142/

ted
  • 5,219
  • 7
  • 36
  • 63
0

Since this works in firefox, I'm not quite sure that its a chrome bug, or expected behavior.. nor whether this fix will continue to work. What I've done, is not apply any perspective to the transform until the mousedown event is fired, this, somehow allows the mouseup event to fire, and links to work.

Relavent fiddle: http://jsfiddle.net/8LMzb/152/

Tim
  • 5,732
  • 2
  • 27
  • 35