d3.mouse doesn’t observe CSS rotate, scale or skew on non-SVG containers.

[mbostock]

For SVG containers, we rely on getScreenCTM to do all the work. For non-SVG containers, we only support translation:

var rect = node.getBoundingClientRect();
return [event.clientX - rect.left - node.clientLeft, event.clientY - rect.top - node.clientTop];

It’d be nice to support arbitrary transforms on non-SVG containers, but there’s not yet a widely-supported CSS equivalent for getScreenCTM, and manually multiplying and inverting the CSS transformation matrix stack to convert the mouse screen coordinates back to local coordinates would be hard! But maybe we can use WebKitCSSMatrix or DOMMatrix?

https://drafts.fxtf.org/geometry/#DOMMatrix
https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrix
https://developer.apple.com/library/safari/documentation/AudioVideo/Reference/WebKitCSSMatrixClassReference/index.html

[mbostock]

It looks like this is waiting on browsers to implement CSSOM-View’s proposed GeometryUtils interface, and in particular convertPointFromNode. I found a blog post from 2014 saying it was implemented in Firefox 31, but it doesn’t seem to still be supported in Firefox 45, so I’m at a loss. Also, Blink removed the corresponding WebKit-only APIs, webkitConvertPointToPage and webkitConvertPageToPoint, so I’m not very hopeful this will be doable soon.

[mbostock]

Okay, it’s implemented in Firefox, but you have to go to about:config and toggle layout.css.convertFromNode.enabled [sic].

[mbostock]

Test case for scrolling, but can be adapted to test with CSS transforms:

http://bl.ocks.org/mbostock/raw/9394911eaa3684676f1537e96213cb97/

[mbostock]

Closing to inactivity.