Different position of click coordinates for Chrome and Firefox

plotly.js
1

Hi!
Here is simplified version of script for adding annotations dynamically using plotly_click (just left click for now :wink: ): https://jsfiddle.net/3ca24zz2/
You can click on the graph and new annotation should show up (when points are available).

Now, imagine that I clicked coordinates [3,5], which results in creating annotation that’s centered on 3,5 point, see below.
This is expected, cool!. It works this way under Chrome (61.0.3163.100)

image
image.png834×409 21.4 KB

However, there is a problem with Firefox (beloved tool of our customers ans stakeholders), which draws annotation in totally different spot, see below. This was tested on Firefox - Developers Edition [57.0b12 (64-bit)], Standard [56.0.2 (64 bit)]) and probably some older ones, too.

image
image.png819×386 18.9 KB

What causes the problem? How can i fix it?

Regards,
MPevik

2

Update:

Problem obviously lies in calculating ax and ay for annottios - under firefox we should NOT substract x(y)axis._offset from event.offsetX(Y). But what causes the difference? How can I guard my script to make it work the same way on both browsers? Is it a bug in Plotly library or browser’s different approach to SVG/event offset calculation?

3

Hmm. I don’t think event.offsetX and event.offsetY are part of the spec. Maybe try using clientX and clientY to compute the position.