Tooltip jumps to upper left corner on map drag in Firefox

[pcaisse]

Description

Tooltip jumps to upper left corner on map drag

Steps To Reproduce

1. Go to any map on staging
2. Ensure default selection tool (hand) is chosen
3. Mouse over any geounit so that tooltip is shown
4. Drag map

Expected behavior

Tooltip continues to follow cursor

Actual behavior

Tooltip jumps to the upper left corner of the map

Screenshots

Your environment

Saw this in Firefox but not in Chrome

• OS: Ubunut 18.04
• Browser Firefox 78.0.2

[pcaisse]

I looked in this and based on my testing it seems that offsetX and offsetY on e.originalEvent are always zero in Firefox: https://github.com/PublicMapping/districtbuilder/blob/develop/src/client/components/map/MapTooltip.tsx#L108

This may be a Mapbox bug or just a Firefox specific behavior.

There's another similar property (layerX/layerY) which seems to always have the same values as offsetX/offsetY in Chrome so that should also work. However, these properties are non-standard and their use seems to be discouraged: https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/layerX

They're also not included in the TypeScript MouseEvent which Mapbox's MapMouseEvent extends, likely for that very same reason (non-standard and should be avoided).