when working with <svg> in FireFox, getScreenCTM() does not take transforms applied outside of the outermost <svg> element into account.

applying a transform to an enclosing <div> will cause unwanted behavior. here is an example: JSFiddle: getScreenCTM() not working in FireFox

If opened in Chrome, everything works fine. in FireFox, neither the rotation nor scale applied on the outer <div> elements have any effect of the SVGMatrix that's returned from rect.getScreenCTM().inverse(), thus detaching the <rect> element from the mouse position.

If you comment out the #scale and #rotate sections of the CSS file, you'd get a different transformation matrix in Chrome(as expected) and the same one in Firefox which is exactly the problem.

I tried working around this by applying the <div> transforms manually, as seen here: JSFiddle: Manually Applying transforms

This neither worked nor produced consistent result across Chrome and FireFox.

I've seen several reports on Bugzilla from years ago describing a similar bug but these are very old. There are also questions here of StackOverflow regarding the matter but they are not exactly the same, plus the last one was posted in 2016.

I'm trying to tackle this for a while now and I'm at a complete loss. Help would be very much appreciated!