D3: Wrong position from d3.mouse in Firefox on translate() positioned container

Created on 21 Mar 2016 · 4Comments · Source: d3/d3

Trying to get the position on mousemove with d3.mouse returns wrong pixel values. As the container is positioned with transform: translate(-50%, -50%); via CSS, the returned pixels have an offset of half the SVG size.

See this pen where the error occurs: http://codepen.io/ro-ka/pen/bpqazK?editors=0100

In Chrome and Safari it is working fine, in Firefox it’s wrong. I’d expect to get 0 for the x value on hovering the left side of the SVG, not -300 (the whole SVG is 600px wide) as it is returned in Firefox.

moz

Source

ro-ka

Most helpful comment

I just spent a while debugging this in my viz. I found a workaround for my use case that might help others.

use a transform _attribute_ on svg elements, use a transform _style_ on html elements

// d3.mouse is correct in FF
<g transform="translate(50, 50)"> ... </g>

// d3.mouse is offset by 50px in FF
<g style="transform: translate(50px, 50px);"> ... </g>

Here's an example (open in FF or IE): https://codepen.io/lax4mike/pen/XgyYZN

One thing to note is that you can't use % in the translate when it's an attribute.

lax4mike on 13 Jul 2017

👍3

All 4 comments

@ro-ka I'm experiencing the same issue.
I temporarily fixed it with a hack (A combination of left / top positions and negative margins.)
Not the best option, so I'm trying to find a solution as well.

patriziosotgiu on 29 Mar 2016

👍1

This appears to be is a Firefox bug with getScreenCTM, and D3 is not a compatibility layer so I don’t plan on implementing a workaround in d3.mouse. The following issues describing the problem:

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

The former (849203) appears to have been wrongly closed: the closing comment remarks on the SVG’s viewBox attribute, but it’s trivial to remove the viewBox attribute and still demonstrate the issue.

mbostock on 19 Apr 2016

I just spent a while debugging this in my viz. I found a workaround for my use case that might help others.

use a transform _attribute_ on svg elements, use a transform _style_ on html elements

// d3.mouse is correct in FF
<g transform="translate(50, 50)"> ... </g>

// d3.mouse is offset by 50px in FF
<g style="transform: translate(50px, 50px);"> ... </g>

Here's an example (open in FF or IE): https://codepen.io/lax4mike/pen/XgyYZN

One thing to note is that you can't use % in the translate when it's an attribute.

lax4mike on 13 Jul 2017

👍3

Is there any updates on this or easy workaround on this?

d3.mouse is still returning incorrect positions on Firefox if an SVG element is inside an HTML element that uses transform. For me, the only sub-optimal option right now is to not use transform for the HTML element.

Firefox: 57
D3: 4.9.1