Come calcolare getBoundingClientRect() senza considerare le trasformazioni?

Question

getBoundingClientRect() restituisce le coordinate di un elemento sullo schermo dopo la trasformazione del. Come faccio a calcolare quelle coordinate prima che venga trasformato lo? cioè senza trasformazioni.

Il modo più semplice che ho trovato era:

element.style.transform = 'none'; //temporarily reset the transform 
var untransformedOffset = element.getBoundingClientRect().top; //get the value 
element.style.transform = ''; //set it back 

ma che provoca lento layout di santa ragione, particolarmente evidente se fatto su molti elementi. Demo dal vivo: http://jsbin.com/nibiqogosa/1/edit?js,console,output

C'è un modo migliore?

---

Questo codice javascript può essere applicato a:

<div id="element"></div> 
<style> #element { transform: translateY(20px); }</style> 

E il risultato sarà 0 (escluso il margine della pagina)

Il risultato di element.getBoundingClientRect().top sarà 20 (escludendo il margine della pagina)

Edit: Risposte roundup

http://jsbin.com/kimaxojufe/1/edit?css,js,console,output

Answer 1

posizione dell'elemento ottenere senza considerare qualsiasi trasformazione sull'elemento e sull'albero DOM:

var el = element, 
offsetLeft = 0, 
offsetTop = 0; 

do{ 
    offsetLeft += el.offsetLeft; 
    offsetTop += el.offsetTop; 

    el = el.offsetParent; 
} while(el); 

---

ottenere la posizione dell'elemento senza considerare trasformazione applicata ad esso ma mantenendo ogni trasformazione il DOM albero.

Per fare ciò, è possibile provare a ripristinare la trasformazione.
È necessario impostare prima transform-origin su 0,0,0 e circondare la larghezza di trasformazione (scala, rotazione) translate(50%,50%) ... translate(-50%, -50%). Ecco un esempio,
cambiamento che:

transform: scale(2) rotate(45deg) translate(20px); 
transform-origin: 50% 50%; //default value 

in

transform: translate(50%, 50%) scale(2) rotate(45deg) translate(-50%,-50%) translate(20px); 
transform-origin: 0 0 0; 

Dobbiamo farlo perché la matrice restituita da getComputedStyle() non include roba fatta con origine trasformare-. Non so davvero perché.

quindi è possibile utilizzare questo codice:

function parseTransform(transform){ 
    //add sanity check 
    return transform.split(/\(|,|\)/).slice(1,-1).map(function(v){ 
     return parseFloat(v); 
    }); 
} 

function convertCoord(transformArr, x, y, z){ 
    //add sanity checks and default values  

    if(transformArr.length == 6){ 
     //2D matrix 
     //need some math to apply inverse of matrix 
     var t = transformArr, 
      det = t[0]*t[3] - t[1]*t[2]; 
     return { 
      x: ( x*t[3] - y*t[2] + t[2]*t[5] - t[4]*t[3])/det, 
      y: (-x*t[1] + y*t[0] + t[4]*t[1] - t[0]*t[5])/det 
     } 
    } 
    else /*if (transformArr.length > 6)*/{ 
     //3D matrix 
     //haven't done the calculation to apply inverse of 4x4 matrix 
    } 
} 

var elRect = element.getBoundingClientRect(), 
    st = window.getComputedStyle(element), 

    topLeft_pos = convertCoord(
       parseTransform(st.transform), 
       elRect.left, 
       elRect.top, 
       st.perspective 
    );  

Non sto a spiegare la parte di matematica, perché penso che sia oltre la portata di questo post. Potrebbe ancora spiegarlo da un'altra parte (un'altra domanda forse?).

Answer 2

Mi è piaciuta la risposta di Ghetolay. L'ho usato ma l'ho reso un po 'più performante evitando il loop.

Ho una tag cloud trascinabile e devo aggiornare la posizione di trascinamento usando le trasformazioni, ma tengo traccia della posizione originale (senza trasformazione).

La risposta precedente suggeriva di eseguire il ciclo attraverso i parametri offset. Nel mio caso, e penso in molti casi, i tag vengono trasformati ma il contenitore no. Quindi devo solo ottenere il primo offsetParent e utilizzare getBoundingClientRect() lì. Non c'è bisogno di continuare ad andare in loop. Ho risolto questo problema:

var el = element; 
var parentRect = element.offsetParent.getBoundingClientRect(); 
var offsetLeft = parentRect.left + element.offsetLeft; 
var offsetTop = parentRect.top + element.offsetTop;