search

airbnb / visx

🐯 visx | visualization components
https://airbnb.io/visx
MIT License
19.55k stars 719 forks source link

[@visx/event] Bad svg point calculation in Firefox #1174

Open vovakulikov opened 3 years ago

vovakulikov commented 3 years ago

Hi there.

It seems like in Firefox svg.screenCTM() result is a bit different compared to other browsers (Safari, Chrome). More about this here https://bugzilla.mozilla.org/show_bug.cgi?id=1610093

Since @visx/event uses this API to calculate svg point position https://github.com/airbnb/visx/blob/d5fb82e42af56da4ee325ac5d2028fde52a48b01/packages/visx-event/src/localPointGeneric.ts#L12-L25

This all leads us to the case when we translate our chart we get a bad tooltip and cursor line position.

Screenshot 2021-04-17 at 15 17 32
williaster commented 3 years ago

Thanks for the report @vovakulikov 🙏 Not sure what an ideal fix is for that, open to suggestions/thoughts!

tschai-yim commented 5 months ago

The bug was fixed in Firefox v126, but the misaligned tooltips / brushes are still a problem when they are used inside a translated svg element. See this example, where I shifted the brush 100 pixels to the right. In Chrome, it works as expected, in Firefox it seems to take the outermost svg element as reference.