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

[vovakulikov]

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

visx/packages/visx-event/src/localPointGeneric.ts

Lines 12 to 25 in d5fb82e

	const svg = isSVGElement(node) ? node.ownerSVGElement : node;
	const screenCTM = isSVGGraphicsElement(svg) ? svg.getScreenCTM() : null;
	if (isSVGSVGElement(svg) && screenCTM) {
	let point = svg.createSVGPoint();
	point.x = coords.x;
	point.y = coords.y;
	point = point.matrixTransform(screenCTM.inverse());
	return new Point({
	x: point.x,
	y: point.y,
	});
	}

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

[williaster]

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

[tschai-yim]

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.