Fix positioning of hoverdetail in chrome when zooming

[rndstr]

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/c81f037689467b0d593ea19116d95728489f17df 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

[coveralls]

Coverage increased (+0.02%) to 62.894% when pulling c8a5bf0fca9c5fe00752918adb24fd3f525f09d1 on rndstr:fix-hoverdetails-position-chrome-zoom into 7689e12e9d1f7177d607c347f3a26b1efb0455b8 on shutterstock:master.

[cesine]

Thanks for this @rndstr!

I can also manually reproduce in the examples/extensions.html

Before

• the hover detail is way off at zoom 200%

I also did a quick test for both chrome and an older version firefox

After

Tests:

• in chrome at 0 zoom
  • expect hover to be accurate
• in chrome at 300%
  • expect hover to be accurate

• in firefox (old firefox v38) at 0 zoom
  • expect hover to be accurate
• in firefox at 500%
  • expect hover to be accurate

published as v1.6.5 https://www.npmjs.com/package/rickshaw