Mobilesafari監視所

Mobilesafariの挙動をテストするページです。

background

background-size:cover;
background-attachment:fixed
が効かないやつ。

このページのスクロールを戻して、「ファーストビュー比較用」リンクをクリックしたとき、背景画像が同じように表示されるのが私の意図。しかし、MobileSafariだけ言うことを聞かない。

テスト結果

×iOS 12.5.7 iPod touch 6の最終OS

×iOS 15.8.3 iPod touch 7の最終OS

×iOS/iPad OS 16 iPhone 8 / Plusの最終OS

×iOS/iPad OS17

×iOS18Beta3

×iOS18.3

loading="lazy"検証用の空白

Safari(iOS、Mac両方)が変なタイミングで画像を読み込もうとするやつ。

ページを読み込んだ時点で、マッチするsourceをimgのloading="lazy"の指定にかかわらず読み込んでいく。私が意図するのはそうではなく、表示画面が近づいてきたらマッチするsourceを読み込んでもらうというもの。ChromeとFirefoxは意図通り動いている。

もしかして、私の記述方法が間違っているのか？


<picture>
<source srcset="avif">
<source srcset="jpeg">
<img loading="lazy" src="jpeg">

テスト結果

iOS 18.2 ×

以下、異邦人より3枚抜粋