Safari 17.5で多数のリダイレクト画像にloading="lazy"を指定すると読み込まれない問題（翻訳）
Safari 17.5（および最新のSafariテクノロジープレビュー"Safari 18.0, WebKit 19619.1.18"）は、リダイレクト後に解決されなければならないsrc属性を持つimgタグに対してloading="lazy"で遅延読み込みを有効にすると、imgタグが大量にある場合に読み込みが止まってしまうという悪質なバグがあるようです。このバグは常にではなく時々発生しますが、一度起きると5分ほど継続します。
リストに以下のような画像が多数あるとします。
<img loading="lazy" src="/a/redirect/to/some.webp">
何も問題なさそうですよね？しかし以下のような結果になりました。
おかしなことに、このバグがひとたび発生すると以下のような振る舞いを見せるようになります。
- Safariは「元通りになりません」。つまり、スクロールやウィンドウのリサイズを行ったときに画像を読み込もうとしません。
-
SafariのWebインスペクタ（開発者コンソール）に何も出力されず、[ネットワーク]タブにもエラーが表示されません。
-
このバグは、ページで数分間リロードを繰り返しても解消されません（時間ベースのキャッシュが失効したときとほぼ同じ）。
-
Safariを完全に終了して再起動しても、問題は解決しません（システム全体のキャッシュかプロセスが原因であることを示唆している）。
当初はWebPファイルを多数読み込もうとしていたのが原因かと思って、それに囚われてしまいましたが、リダイレクトを行わずに静的ファイルを直接読み込んでみると、問題はたちまち解消しました。
その途端、このバグはファイルの種類とは無関係であり、問題を実際に引き起こしていたのは「リダイレクトの必要な画像が大量にある」ことだったとひらめき、後は簡単に解決できました。つまり、リダイレクトをやめればよいということです。
（ページを読み込むたびに数百個の画像をリダイレクトさせるのは途方もなく無駄なので、どちらにしろリダイレクトはやめておく方がよいでしょう）
では、私が数百個ものサムネイル画像をリダイレクトしていたのはなぜだったかって？ユーザーがアップロードしたアセットをホスティングするためにActive Storageを使っているのですが、Active StorageはデフォルトでそれらのアセットをRails内部のルーティング経由で配信しており、アセットがホスティングされているストレージプロバイダにリダイレクトされるようになっています。
つまり、アプリで使っているActive Storageがデフォルトの「リダイレクトモード」のままになっていて、アセットがCDN経由で配信されるようになっていないと、このようなバカげた状況に陥りやすくなります。
幸い私の場合は、Active Storageのリダイレクトモードをdevelopmentモードでしか使っていませんでした（productionモードではAWS CloudFrontによる配信へのURLをRailsで生成しています）。そういうわけで、実際にはこのバグに悩まされることはなかったでしょう。もちろん私はそんなことは知る由もなかったので、このバグのせいでせっかくの朝が台無しになる様子を、私は腰掛けてリラックスしながら目撃したのですが、手をこまねいていたわけではありません。
プログラマーは楽しいですね。少なくとも今日は金曜日です。
概要
元サイトの許諾を得て翻訳・公開いたします。
日本語タイトルは内容に即したものにしました。
なお、これと同じではないものの、踏みやすそうな類似の別バグがSafariにあるとBPS社内で教わりました↓。
参考: 281998 – Image incorrectly loads even when set to lazy loading.