Incorrect placement of "by response time" overlay in Firefox

[itsderek23]

As reported by @nathansamson via https://github.com/scoutapp/roadmap/issues/33#issuecomment-384824677, in Firefox the selection overlay for the "by response time" chart is placed about 50% farther to the right than it should be.

Works fine in Chrome.

[itsderek23]

I think we're hitting this error: https://github.com/d3/d3/issues/2771. Root cause looks like a FF bug.

Looks like d3 issues are now hidden? Here's the Google Cache.

Mentioned workaround:

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.

[itsderek23]

May be worth an upgrade to dc.js v3 to see if the updated brush behavior works better on FF:

https://github.com/dc-js/dc.js/wiki/Changes-in-dc.js-version-3.0#brush-and-zoom-behaviors

[nathansamson]

It seems to be fixed now?

[itsderek23]

Who fixed it? 😄

I agree - works for me now in FF 60.0.2.

Thanks for updating the issue @nathansamson.