title: Load images lazily if they appear after scrolling (cross browser problems)
body: <p>I am currently building a library which provides the browser the ability to load images lazily when they appear in the viewport after scrolling which is meant to not overstrain mobile connections. It works perfectly in Chrome but has its issues in the latest Firefox. As far as I could tell, there is a issue in laying out the images (as some images do not appear in the right position after loading the page although they should) or in the cross browser support of <code>window.innerHeight</code>. I tried to use other ways to avoid <code>innerHeight</code> and even tried jQuery but problems persists.
  How do I solve my problem?</p>
  
  <p><a href="http://codepen.io/lumoris/pen/NNMXYM" rel="nofollow">Codepen example</a> (You may have to resize the viewport in Codepen)</p>
  
  <p>Thanks in advance.</p>
  
  <hr>
  
  <p><strong>Update</strong></p>
  
  <ul>
  <li>It turns out that <code>offsetTop</code> significantly differs between images in a row in Firefox.</li>
  <li>Even though <code>width</code>- and <code>height</code>-attributes are explicitly given, the inspector gives the <em>wrong</em> dimensions for images with <code>opacity: 0;</code> (e.g. 480x480 becomes 0x19). You can get the right dimensions by using <code>getComputedStyle(element).width</code> or <code>getComputedStyle(element).height</code> or by parsing <code>element.outerHTML</code> instead of reading the <code>element.height</code>-property. If the image has <code>display: inline-block;</code> in Firefox, <code>element.height</code> is usable again and behaves like Chrome.</li>
  <li>It is possible to approximate the expected <code>offsetTop</code> by calculating <code>element.offsetTop - parseInt(getComputedStyle(element).height)</code>. Accordingly, the image is nearly moved by its full height in +y-direction.</li>
  <li><code>display: flex;</code> seems to solve to the <em>render</em> problem, but there must be a way to solve it without flexbox.</li>
  </ul>
  
  <p>A solution is still missing.</p>