Firefox getBoundingClientRect () ignores conversions

Question

I am adding some SVG paths to my webpage, but I'm having difficulty with Firefox 43.0. It seems like when I apply transform: scale(0.1) to my path, Firefox does not update the client bounding box (via getBoundingClientRect() )

Here is a screenshot of my path before the conversion and the correct bounding box:

And here it is with the conversion applied, with the visual clearly outside the bounds:

In contrast, Chrome updates its bounding box as expected. (Pay attention to limited proportions.)

This issue is missing in Chrome or Edge. I found this old error since 2012, which says that the problem was fixed in version 12.0, and the documentation states:

Starting with Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9), the CSS transform effect is taken into account when calculating the rectangle bounding the element.

... which does not seem to be true. For other browsers, I reduced my circle to 10% of its original size, and then calculated the coordinate offset from the client rectangle to center it in the original 100% scale. However, since the client rectangle is not updated after the conversion in Firefox, it messed up the calculations.

How do I get around this for Firefox?

Answer 1

Transforms can be set using attributes, for example.

 <path transform="scale(0.1)" d="..."/> 

or CSS how you do it. Using CSS is a newer way to do this; The SVG 1.1 specification only defines attribute transformations.

getBoundingClientRect does not account for CSS transforms currently on Firefox, but it takes transform attributes into account.