search

d3 / d3-drag

Drag and drop SVG, HTML or Canvas using mouse or touch input.
https://d3js.org/d3-drag
ISC License
333 stars 61 forks source link

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

Closed krrishh-org closed 5 years ago

krrishh-org commented 6 years ago

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)

fedyk commented 5 years ago

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/

mbostock commented 5 years ago

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