Firefox getBoundingClientRect() does not account for transforms

Question

I'm adding some SVG Paths to my web page, but am having difficulty with Firefox 43.0. It appears that when I apply transform: scale(0.1) to my path, Firefox does not update the bounding client rectangle (via getBoundingClientRect())

Here's a screenshot of my Path before the transform, and the correct bounding rectangle:

And here it is with the transform applied, with the visual clearly outside the bounding box:

By contrast, here is Chrome updating its bounding box as expected. (Note the constrained proportions.)

This problem isn't present on either Chrome or Edge. I did find this old bug from 2012 which says the problem was fixed in version 12.0, and the documentation states:

Starting from Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9), the effect of CSS transforms is considered when computing the element's bounding rectangle.

...which doesn't seem to be true. For the other browsers, I was scaling down my circle to 10% of its original size, then computing the coordinate offset from the client rectangle to center it on its original 100% scale position. However, since the client rectangle isn't updated after the transform in Firefox, it's messing up the calculations.

How do I work around this for Firefox?

Answer 1

Transforms can be set via attributes e.g.

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

or CSS as you're doing. Using CSS is the newer way to do it; the SVG 1.1 specification only specifies attribute transforms.

getBoundingClientRect doesn't take CSS transforms into account currently on Firefox but it does take transform attributes into account.