Black Lives Matter. Please consider donating to Black Girls Code today.

Different position of click coordinates for Chrome and Firefox

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)

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.

What causes the problem? How can i fix it?

Regards,
MPevik

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?

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.