html - Mobile Safari: 高さ 100% の画像が絶対配置コンテナーに表示されない

Question

デモ: http://codepen.io/malte/pen/kDlbt

絶対配置ラッパーを使用して、画像をサムネイル フレームの中央に配置しています。(のみ) モバイルサファリでは、画像は表示されません。.image-pos コンテナを調べると、高さが親のサイズに適切に設定されていることがわかります。それに固定ピクセルの高さを適用すると、画像が表示されます...誰もそれを修正する方法を知っていますか? どのデスクトップブラウザでも動作します...

HTML :

<div class="wrapper">
      <div class="thumb-grid">
         <div class="thumb">
          <a href="#" class="image">
            <div class="image-pos">
              <img src="http://images.weserv.nl/?url=static.living.is/gallery/original/5184f3631034bcdf16bd4d37c341928e.jpg&il&w=600" />
            </div>
          </a>
          <div class="details">
             <h5>Image Title</h5>
          </div>
        </div>

         <div class="thumb">
          <a href="#" class="image">
            <div class="image-pos">
              <img src="http://images.weserv.nl/?url=static.living.is/gallery/original/5184f3631034bcdf16bd4d37c341928e.jpg&il&w=600" />
            </div>
          </a>
          <div class="details">
             <h5>Image Title</h5>
          </div>
        </div>

          <div class="thumb">
          <a href="#" class="image">
            <div class="image-pos">
              <img src="http://images.weserv.nl/?url=static.living.is/gallery/original/016e551de2f53d58e7f4acd68279e6a1.JPG&il&w=600" />
            </div>
          </a>
          <div class="details">
             <h5>Image Title</h5>
          </div>
        </div>
      </div>
    </div>

CSS :

.wrapper {
  width: 600px;
  margin: 30px auto 0
}

.thumb-grid {
  text-align: justify;
}

.thumb-grid:after {
        content: '';
        display: inline-block;
        width: 100%;
}

.thumb {
        position: relative;
        display: inline-block;
        width: 31.5%;
        height: 0;
        padding-top: 29%;
        margin-bottom: 6%;
}

.image {
    height: 73%;
    overflow: hidden;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
  vertical-align: top;
  display: block;
  border: 1px solid #eee;
}

.image-pos {
    height: 100%;
    left: 50%;
    margin-left: -300px;
    position: absolute;
    text-align: center;
    width: 600px;
}

.image-pos img {
  height: 100%;
  max-height: 100%;
  min-height: 100%;
  max-width: none;
  width: auto;
  display: inline;
  border: 0;
}

.details {
  height: 27%;
  position: absolute;
  top: 73%;
}

.details h5 {
  margin: 0;
  padding-top: 5px;
}

デモ: http://codepen.io/malte/pen/kDlbt