bug: interactions misaligned when plot is inside transform: scale()-ed element

See http://codepen.io/hellochar/pen/JKgXPE and mouse around.

Looks like plotly.js miscalculates where the mouse is positioned if the plot itself is rendered inside an element with a transform: scale() CSS property set. The tooltips don’t match up with where the mouse is. This is most apparent when you try to click+drag an area of the plot and it clearly shows the locations don’t match up.

The buttons in the toolbar line up correctly, as does the hitbox for dragging the axes or enabling/disabling specific traces.

Also it looks like if you’re at the top-left corner of the plot, the mouse position is accurate (that is, the (0, 0) origin point is handled correctly; only the scaling factor is off).

Also see https://github.com/palantir/plottable/issues/1644 which looks to be the same issue in Plottable.

Let me know if that makes sense and if there’s something else I can do!

[archmoj]

https://github.com/plotly/plotly.js/pull/5193 with some adjustments is getting close to address this issue.

[nicolaskruchten]

This issue was tagged as “needs sponsorship” and was instead resolved by the contribution of an excellent pull request for this long-standing issue. Thank you so much for taking the initiative on this @alexhartstone!