58273

CSS3 Translate3d Mouse Events Issue

Question:

So, I’ve got this bit of code: <a href="http://jsfiddle.net/XNvzW" rel="nofollow">jsfiddle.net/XNvzW</a>

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.

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 <a href="https://stackoverflow.com/questions/6751137/css-3d-transformed-html-element-with-negative-z-value-doesnt-fire-events" rel="nofollow"> stackoverflow question </a> that I found didn’t seem to get much discussion or an answer solving the issue.

Thoughts?

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

Found <a href="https://bugs.webkit.org/show_bug.cgi?id=42455" rel="nofollow">this bug filed in WebKit</a> (but it's not exactly what I have going on)

Answer1:

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.

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.

Recommend

  • jQuery hover, mouseenter, mouseleave state (opacity animate)
  • WPF: Opacity and the MouseEnter Event
  • XJC javaType adapter in complexType
  • Raphael - event when mouse near element
  • How to fix the Google Map API when print the whole page?
  • SSRS returning different results than the stored procedure
  • How to hide the cursor in windows when dragging and dropping (possibly in python, or another languag
  • jQuery UI .sortable() call is slow when applies to thousands of elements
  • Problem with sockets in C#
  • Condor job using DAG with some jobs needing to run the same host
  • Index.php as custom error page
  • Crafting a LINQ based solution to determine if a set of predicates are satisfied for a pair of colle
  • Prevent parent page from scrolling when mouse is over embedded iframe
  • Multiple flexboxes with margin-right, except the last one in the row? Without JS?
  • Adding directive inside the directive programatically
  • How do you remove the JComboBox 'click and see dropdown' functionality?
  • Android device acting as an accessory
  • Can someone please explain to me in the most layman terms how to use EventArgs?
  • Execute scripts AJAX returns
  • Create Instant using a negative year
  • Adjust width of select element according to selected option's width
  • Unable to install Git-core+svn by MacPorts
  • Unable to decode certificate at client new X509Certificate2()
  • Django simple Captcha “No module named fields” error
  • how to display data from 1st point on words on y axis for line chart in d3.js
  • Row Count Is Returning the incorrect number using RaptureXML
  • Could not find rake using whenever rails
  • Uncaught Error: Could not find module `ember-load-initializers`
  • req.body is undefined - nodejs
  • Modifying destination and filename of gulp-svg-sprite
  • WinForms: two way TextBox problem
  • Importing jscolor library in angular 2
  • Do create extension work in single-user mode in postgres?
  • R: gsub and capture
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • Comma separated Values
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • Change div Background jquery
  • Can Visual Studio XAML designer handle font family names with spaces as a resource?
  • How to load view controller without button in storyboard?