css - CSS 100％の高さ（アスペクト比を維持しながら）トリックは、循環WebKit再描画バグをトリガーします

Question

私はこの驚くほど素晴らしいCSSテクニックを使用して、選択したアスペクト比を維持しながら<li>、親と同じ高さにするように強制しています<ol>。<ul>

アイデアは、ターゲットのアスペクト比を特徴とする透明なGIFまたはPNGを作成し、その画像を使用して<li> 比例的に引き伸ばすことです。

HTML：

<ol>
  <li>
    <img src="1x1.gif" height="1" width="1">
    <div class="content">
      …
    </div>
  </li>
</ol>

CSS：

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; }

甘い。問題は、ビューポートの<ol>サイズを変更してサイズを変更した場合、WebKitがわざわざサイズを再計算せず<img>、アスペクト比が撮影されることです。ただし、を右クリックして[<div class="content">要素の検査]を選択すると、サイズに合わせてスナップされます。あなたがこの凶悪な再描画ハックを制定するときもそうです：

var image = $('img').get(0);
var oldDisplay = image.style.display;

image.style.display = 'none';
image.offsetHeight; // Secret sauce
image.style.display = oldDisplay; 

本当に、私は<img>サイズがのサイズに基づいているのサイズに基づいてサイズを設定しようとし<li>てい<img>ます。WebKitには、この種の循環参照をパントする最適化があるのではないかと思います。何をすべきか？

バグを自分で体験できるJSFiddleは次のとおりです。http：//jsfiddle.net/steveluscher/H5Mkm/