title: How to compute getBoundingClientRect() without considering transforms?
body: <p><code>getBoundingClientRect()</code> returns the coordinates of an element on the screen <strong>after</strong> being transformed. How do I calculate those coordinates <strong>before</strong> being transformed? i.e. without transforms.</p>
  
  <p>The simplest way I found was:</p>
  
  <pre><code>element.style.transform = 'none'; //temporarily reset the transform
  var untransformedOffset = element.getBoundingClientRect().top; //get the value
  element.style.transform = ''; //set it back
  </code></pre>
  
  <p>but that causes slow layout thrashing, especially noticeable if done on many elements. Live demo: <a href="http://jsbin.com/nibiqogosa/1/edit?js,console,output" rel="noreferrer">http://jsbin.com/nibiqogosa/1/edit?js,console,output</a></p>
  
  <p>Is there a better way?</p>
  
  <hr>
  
  <p>That javascript code can be applied to:</p>
  
  <pre><code>&lt;div id="element"&gt;&lt;/div&gt;
  &lt;style&gt; #element { transform: translateY(20px); }&lt;/style&gt;
  </code></pre>
  
  <p>And the result will be 0 (excluding the page's margin)</p>
  
  <p>The result of <code>element.getBoundingClientRect().top</code> will be 20 (excluding the page's margin)</p>
  
  <h1>Edit: Answers roundup</h1>
  
  <p><a href="http://jsbin.com/kimaxojufe/1/edit?css,js,console,output" rel="noreferrer">http://jsbin.com/kimaxojufe/1/edit?css,js,console,output</a></p>