title: Get real offset left/top of element with inline offsetparent
body: <p>I'm trying to get the coordinates of an element on a page. I've been using the standard way to obtain it:</p>
  
  <pre><code>var el = element, pos = {x: 0, y: 0};
  while ( el ) {
      pos.x += el.offsetLeft;
      pos.y += el.offsetTop;
      el = el.offsetParent;
  }
  </code></pre>
  
  <p>But this method fails when the element in question has <code>display: block</code>, and one of the offsetParents has <code>display: inline;</code>. This is due to the fact described in <a href="https://stackoverflow.com/questions/995838/left-offset-of-an-inline-element-using-jquery">this thread</a>:</p>
  
  <p><img src="https://i.stack.imgur.com/MJyK0.png" alt="The element starts in the middle of the text"></p>
  
  <p>After some trying with jQuery it turns out that their <code>.offset()</code>-method returns the correct offset, and I've looked through the source but not found exactly how they do it. So my question is: how do I get the exact position? I can't use jQuery for this project, and the method in <a href="https://stackoverflow.com/questions/995838/left-offset-of-an-inline-element-using-jquery">the thread described earlier</a> is to cumbersome, adding an element and testing is too much work (performance perspective), and using <code>Element.getBoundingClientRect</code> is not available either.</p>
  
  <p>If you feel like trying it out you can go to <a href="http://apple.com" rel="nofollow noreferrer">Apple.com</a> open your debugger of choice and type in the following:</p>
  
  <pre><code>var el, el2;
  el = el2 = document.querySelector('#worldwide span');
  var pos = {x: 0, y: 0};
  while ( el2 ) {
      pos.x += el2.offsetLeft;
      pos.y += el2.offsetTop;
      el2 = el2.offsetParent;
  }
  alert("Calculated position: " + pos.x + "x" + pos.y + " window size: " + screen.width + "x" + screen.height);
  </code></pre>
  
  <p>With this code I get: <code>Calculated position: 1354x988 window size: 1280x800</code> (ie. the offset left is way of the screen, which it clearly isn't)</p>
  
  <p>How is this possible? Any work-around ideas? Approximations? It does not have to be exact, but it has to be better than before. Thanks.</p>
  
  <p>Edit: This is for the WebKit rendering engine, to clarify.</p>