title: getBoundingClientRect not working as expected on body after transform
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$( document ).ready(function() {
    
      $('body').append('&lt;div id="tester2"&gt;&lt;/div&gt;');
      $('#tester2').css({
       position:'absolute',
        background:'blue',
        width: 10,
        height:10
      });
      setInterval(function(){ 
        var x = $('#tester')[0].getBoundingClientRect();
        $('#tester-pos').text('top: ' + x.top + ', left:' + x.left);
        $('#tester2').css({
         top:x.top,
         left:x.left
       });
      }, 1000);
      
      $('#jquery-version').text('jquery version: ' + $.fn.jquery);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#tester{
    position:absolute;
    top:50px;
    left:50px;
    width:10px;
    height:10px;
    background:red;
  }
  
  #page{
    min-height:200px;
  }
  
  body{
    border:2px solid green;
    transform: scale(1) translate(20px, 40px);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="tester"&gt;
  &lt;/div&gt;
  &lt;div id="page"&gt;
  getBoundingClientRect on red tester returned:
  &lt;span id="tester-pos"&gt;&lt;/span&gt;
  &lt;div id="jquery-version"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I need to place a <code>div</code> over an existing <code>div</code>. The existing <code>div</code> is contained inside the body of and HTML document that has the CSS transform property set. I need to place the new <code>div</code> after the document was rendered and transformed.</p>
  
  <p>When I call <code>getBoundingClientRect()</code> on the <code>div</code> that I need to hide (red square in attached fiddle) I get the wrong top/left. I set the top/left of the blue square to the output of <code>getBoundingClientRect()</code> and they do not overlap.</p>
  
  <pre><code>setInterval(function(){ 
      var x = $('#tester')[0].getBoundingClientRect();
      $('#tester-pos').text('top: ' + x.top + ', left:' + x.left);
      $('#tester2').css({
          top:x.top,
          left:x.left
      });
  }, 1000);
  </code></pre>
  
  <p>How can this be solved?</p>