d3.mouse doesn’t observe CSS transform on Firefox.

[mbostock]

Test case here:

http://bl.ocks.org/mwdchang/raw/a88aa3f61f5a2243d15bb8a264aa432e/

This appears to be a known bug:

https://bugzilla.mozilla.org/show_bug.cgi?id=972041

The problem is that rect.getScreenCTM returns the same matrix independent of any transforms applied to ancestor elements, so it ignores the transform applied to div2. The correct transform is {a: 1, b: 0, c: 0, d: 1, e: 110, f: 152}, the wrong transform is {a: 1, b: 0, c: 0, d: 1, e: 10, f: 52} which is approximately what Firefox returns (f = 53.20000076293945 for some reason…).

I’m not planning on implementing a workaround for this bug, so I’m going to close this issue, but I wanted to document the bug for future reference.

[GopherJ]

Hello, @mbostock

Do you have a plan for fixing this? I'am working on a dashboard system using d3.js and VueJs. I noticed that in firefox, d3.mouse function has added the transform3d attribute value of ancestor.

[StuntStar]

Hello, @mbostock ,

Any workaround for this, looks like in firefox d3.brush does not draw overlay rect properly, if svg container is transformed or translated.

Any help will be appreciated.

[mahish]

Please, go to the mentioned bugzilla page (https://bugzilla.mozilla.org/show_bug.cgi?id=972041) and vote for this annoying bug to be fixed (find the option under Details tab).

[mahish]

The bug was fixed in Firefox 68. However, the issue is still there for me:( Anyone else?

[mahish]

Workaround which works in my case as hinted in #191:

if (firefox) {
  // this works in Firefox
  position = [
    d3.event.offsetX,
    d3.event.offsetY,
  ];
} else {
  // this works in Chrome
  position = d3.mouse(container);
}