d3.event.x and d3.event.y coordinates are different on different browsers

[Gopi Krishna Chepuri]

In the callbacks for drag related events, the d3.event.x and d3.event.y values are reported differently on different browsers.

This is observed on elements that are children of a translated group of elements.

Here is a fiddle:

http://jsfiddle.net/6fz23evr/16/

on firefox 61.0b13 (64-bit) Linux:

the top-left corner of black square reports (200,200)
the bottom-right corner of black square reports (300,300)

on chromium 69.0.3458.0 (Developer Build) (64-bit) Linux:

the top-left corner of black square reports (0,0)
the bottom-right corner of black square reports (100,100)

[Andrii Fedyk]

Here I believe the issue with transform which you have on g element. Here I put svg as a container and now everything works fine on Chrome & Firefox:

http://jsfiddle.net/50d3roch/

[Mike Bostock]

Yep, this is probably a browser bug in getScreenCTM and not something that’s feasible to fix in D3. Related d3/d3-selection#68.