shutterstock / rickshaw / 117

63%

main: 63%

Pull #607

travis-ci

Fix positioning of hoverdetail in chrome when zooming

This commit changes the calculation of the current mouse position to use
`MouseEvent.clientX/Y` (mouse position in relation to the viewport) and
`Element.getBoundingClientRect()` (element position in relation to the
viewport).

`event.layerX/Y` is non-standard and seems to return different values
than we are expecting if there is zooming involved in Chrome.

Demo, zoom in and hover the square:
https://jsfiddle.net/6gnpL75j/

An earlier commit reverted the order of layer vs offset and fixed a
positioning bug in Firefox while introducing this new one in Chrome:
https://github.com/shutterstock/rickshaw/commit/c81f03768
I looked around for that Firefox positioning bug in v1.6.0 which I found
in: http://code.shutterstock.com/rickshaw/examples/extensions.html
With this PR, both Chrome and Firefox show labels in the correct spot.

More information:
https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX
https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/layerX

Chromium issue:
https://bugs.chromium.org/p/chromium/issues/detail?id=323518

514 of 979 branches covered (52.5%)

1178 of 1873 relevant lines covered (62.89%)

99.02 hits per line