chrome100以降の注意点はUserAgentだけでは無かった話

概要

巷ではChrome100への注意点としてUserAgent判定に気をつけるよう注意喚起がありました。

しかし、実はそれ以外にも仕様変更された箇所があり罠にハマったので情報共有しておきます。

具体的にはChrome100以降からはiframeタグにloading="lazy"指定があると要素が表示されるまではloadイベントが発火されなくなったのです。

検証コード

実際の検証コードをCodepenで書きました。パターンの内訳としては以下の通りです。

パターン	詳細
1	loading="lazy"指定があるがFirstViewで表示される
2	要素をstyleで明示的に非表示しただけ
3	loading="lazy"指定かつ要素をstyleで明示的に非表示
4	loading="lazy"指定かつFirstViewで表示されない

CodePenのURLが不正です

上記をChrome100未満やSafariやFirefoxで見た場合は全パターンでloadイベントが発火されています。

しかしChrome100以降ではパターン3と4については実際に要素が表示されるまではloadイベントが発火されません。

※パターン3についてはshow iframe3ボタンを押すとloadイベントが発火されます
※パターン4はスクロールして要素が実際に表示されたタイミングでloadイベントが発火されます

結論

iframeタグのloadイベントを契機に初期化処理などを書いている場合はloading="lazy"指定を避けるか、イベント処理自体を別契機に付け替える等の対応が必要です。