loading=”lazy” を設定した際にiOS Safariで画像が表示されない

タイトルの通りですが、loading属性で画像の遅延読み込みの設定をしていた際、一部画像がiOS Safariで表示されない不具合に遭遇したのでメモ。確認したのはiOS Safariの18になります。

サンプルコード

表示されなかったのは横方向に流れる画像の場合で、コードは以下の通りです。

<div class="x-scroll">
  <div class="x-scroll_inner">
    <div class="x-scroll_block">
      <div class="x-scroll_item"><img src="img01.jpg" alt="" loading="lazy"></div>
      <div class="x-scroll_item"><img src="img02.jpg" alt="" loading="lazy"></div>
      <div class="x-scroll_item"><img src="img03.jpg" alt="" loading="lazy"></div>
      <div class="x-scroll_item"><img src="img04.jpg" alt="" loading="lazy"></div>
      <div class="x-scroll_item"><img src="img05.jpg" alt="" loading="lazy"></div>
    </div>
    <div class="x-scroll_block">
      <div class="x-scroll_item"><img src="img01.jpg" alt="" loading="lazy"></div>
      <div class="x-scroll_item"><img src="img02.jpg" alt="" loading="lazy"></div>
      <div class="x-scroll_item"><img src="img03.jpg" alt="" loading="lazy"></div>
      <div class="x-scroll_item"><img src="img04.jpg" alt="" loading="lazy"></div>
      <div class="x-scroll_item"><img src="img05.jpg" alt="" loading="lazy"></div>
    </div>
  </div>
</div>

keyframesとtranslateで横方向に常時移動させています。

.x-scroll {
	width: 100%;
	overflow: hidden;
}
.x-scroll_inner {
	display: flex;
}
.x-scroll_block {
	display: flex;
  flex-shrink: 0;
	animation: 20s linear infinite xScroll;
}
@keyframes xScroll {
  0%   { translate: 0;}
  100% { translate: -100%;}
}
.x-scroll_item {
	width: 600px;
}

これで横方向に流れる実装はできたのですが、iOS Safariで確認した際に画像が表示されませんでした。
画像が表示されないデモページ

とりあえずの解決策として loading=”lazy” を外したところ、画像は表示されました。

<div class="x-scroll">
  <div class="x-scroll_inner">
    <div class="x-scroll_block">
      <div class="x-scroll_item"><img src="img01.jpg" alt=""></div>
      <div class="x-scroll_item"><img src="img02.jpg" alt=""></div>
      <div class="x-scroll_item"><img src="img03.jpg" alt=""></div>
      <div class="x-scroll_item"><img src="img04.jpg" alt=""></div>
      <div class="x-scroll_item"><img src="img05.jpg" alt=""></div>
    </div>
    <div class="x-scroll_block">
      <div class="x-scroll_item"><img src="img01.jpg" alt=""></div>
      <div class="x-scroll_item"><img src="img02.jpg" alt=""></div>
      <div class="x-scroll_item"><img src="img03.jpg" alt=""></div>
      <div class="x-scroll_item"><img src="img04.jpg" alt=""></div>
      <div class="x-scroll_item"><img src="img05.jpg" alt=""></div>
    </div>
  </div>
</div>

loading=”lazy”を外したデモページ

動作テストとして、loading=”lazy”は付与しつつ keyframes + translate で常時動かす(X方向の画面外には出さない)という実装を試してみます。

<div class="x-scroll">
  <div class="x-scroll_item"><img src="img01.jpg" alt="" loading="lazy"></div>
</div>

.x-scroll_item {
	width: 80%;
	animation: 1s linear infinite xScroll;
}
@keyframes xScroll {
  0%   { translate: 0;}
  100% { translate: 10%;}
}

この場合は画像は表示されるようでした。
画面外に出さないデモページ

他ざっくりと動作テストをしてみての所感ですが、loading=”lazy” にプラスして今回の横方向に流れる画像のような、viewportの範囲外にいつつkeyframesで常時動いている場合に表示されないことが起こり得るようでした。