iPhoneでimgにCSS3のanimationでopacityを0から1にしようとしたら画像が表示されなかった

少し前のプロジェクトでガワネイティブのアプリを作っていた時に、iPhoneで見たら画像が、表示されない状態が発生しました。

例えば、以下のようなCSSをimgタグに設定している場合です。

.img {
  position: absolute;
  top: 120px;
  visibility: visible;
  opacity: 0;
  -webkit-animation: fadeIn 0.5s ease-in-out 1.1s forwards;
  animation: fadeIn 0.5s ease-in-out 1.1s forwards;
}
@-webkit-keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

色々試した結果、display:block;を入れたら表示されるようになりました。

.img {
  display: block; /* ここを追加した */
  position: absolute;
  top: 120px;
  visibility: visible;
  opacity: 0;
  -webkit-animation: fadeIn 0.5s ease-in-out 1.1s forwards;
  animation: fadeIn 0.5s ease-in-out 1.1s forwards;
}
@-webkit-keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

ちょっと今は再現ができなくて詳細は分かりませんが、もし似たような症状の方いましたらお試しあれ。