Firefox getBoundingClientRect() non tiene conto delle trasformazioni

Question

Aggiungo alcuni percorsi SVG alla mia pagina Web, ma ho difficoltà con Firefox 43.0. Sembra che quando applico transform: scale(0.1) sul mio cammino, Firefox non aggiorna il rettangolo client di delimitazione (via getBoundingClientRect())

Ecco uno screenshot del mio percorso prima la trasformazione, e la corretta rettangolo:

e qui è con la trasformazione applicata, con la visuale chiaramente al di fuori del rettangolo di selezione:

Al contrario, Chrome aggiorna il riquadro di delimitazione come previsto. (Notare le proporzioni vincolate.)

Questo problema non è presente su entrambi Chrome o Edge. Ho trovato this old bug from 2012 che dice che il problema è stato risolto nella versione 12.0, e la documentazione afferma:

A partire da Gecko 12,0 (Firefox 12.0/Thunderbird 12.0/SeaMonkey 2.9), l'effetto di CSS trasforma è considerato nel calcolo del rettangolo di delimitazione dell'elemento.

... che non sembra essere vero. Per gli altri browser, stavo ridimensionando il mio cerchio al 10% delle sue dimensioni originali, quindi calcolando l'offset delle coordinate dal rettangolo client per centrarlo sulla sua posizione originale del 100% della scala. Tuttavia, dal momento che il rettangolo del client non viene aggiornato dopo la trasformazione in Firefox, sta incasinando i calcoli.

Come posso aggirare questo per Firefox?

Answer 1

Le trasformazioni possono essere impostate tramite attributi, ad es.

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

o CSS come stai facendo. Usare i CSS è il modo più nuovo di farlo; la specifica SVG 1.1 specifica solo le trasformazioni degli attributi.

getBoundingClientRect doesn't take CSS transforms into account attualmente su Firefox ma prende in considerazione gli attributi di trasformazione.