title: getBoundingClientRect is inaccurate
body: <p>My goal is to inject an element right before it's on the viewport (depending on the lazy data attribute, default is 100px before the element is on the viewport). And how I do it is by using <code>getBoundingClientRect();</code></p>
  
  <pre><code>const LAZY_THRESHOLD_DEFAULT = 100;
  TestBox.isOnScreen = function(element) {
      const reservedDistance = parseInt(element.getAttribute(THRESHOLD) || LAZY_THRESHOLD_DEFAULT, 10);
      const rect = el.getBoundingClientRect();
      return (
          rect.top &gt;= 0 &amp;&amp;
          rect.left &gt;= 0 &amp;&amp;
          rect.bottom &lt;= $(window).height() &amp;&amp;
          rect.right &lt;= $(window).width()
  }
  </code></pre>
  
  <p>And I use it like this</p>
  
  <pre><code>$(window).scroll(function() {
    if (TestBox.isOnScreen(element)) {
      // Inject the element
    }
  });
  </code></pre>
  
  <p>One major thing I find out is (I console log the <code>$(window).scrollTop()</code> together with console log when <code>TestBox.isOnScreen(element)</code>: The moment when the element is detected to be on the viewport is not always accurate. Sometimes by 14px, 5px or exactly good.</p>
  
  <p>Does anyone ever experience this issue? Or am I implementing it wrong?</p>