title: CSS 100% height (while maintaining aspect ratio) trick triggers circular WebKit redraw bug
body: <p>I'm using this amazingly awesome CSS technique to force <code>&lt;li&gt;</code> to be as tall as their parent <code>&lt;ol&gt;</code>/<code>&lt;ul&gt;</code> while maintaining an aspect ratio of my choosing.</p>
  
  <p>The idea is to craft a transparent GIF or PNG that features your target aspect ratio, then to use that image to stretch the <code>&lt;li&gt;</code> <em>proportionally</em>.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ol&gt;
    &lt;li&gt;
      &lt;img src="1x1.gif" height="1" width="1"&gt;
      &lt;div class="content"&gt;
        …
      &lt;/div&gt;
    &lt;/li&gt;
  &lt;/ol&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>ol  { height: 50%; } /* half the height of the viewport, let's say */
  li  { height: 100%; position: relative; display: inline-block; }
  img { height: 100%; width: auto; }
  .content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
  </code></pre>
  
  <p>Sweet. Problem is, if you resize the <code>&lt;ol&gt;</code> by resizing the viewport, WebKit won't bother to recalculate the size of the <code>&lt;img&gt;</code>, and your aspect ratio is shot. If, however, you right click on the <code>&lt;div class="content"&gt;</code> and choose “Inspect Element”, it snaps to size! So too when you enact <a href="https://stackoverflow.com/a/3485654/802047">this heinous redraw hack</a>:</p>
  
  <pre><code>var image = $('img').get(0);
  var oldDisplay = image.style.display;
  
  image.style.display = 'none';
  image.offsetHeight; // Secret sauce
  image.style.display = oldDisplay; 
  </code></pre>
  
  <p>Really, I'm trying to size an <code>&lt;img&gt;</code> based on the size of an <code>&lt;li&gt;</code> whose size is based on that of the <code>&lt;img&gt;</code>. I suspect that there's an optimization in WebKit that punts on this kind of circular reference. What to do?</p>
  
  <p>Here's a JSFiddle where you can experience the bug for yourself: <a href="http://jsfiddle.net/steveluscher/H5Mkm/" rel="nofollow noreferrer">http://jsfiddle.net/steveluscher/H5Mkm/</a></p>