背景

画像と、その他のコンテンツが動的に切り替わっていく画面で、画像が見えてから他のコンテンツを表示させたいという要件があり、対象の画像のimageのonloadで他のコンテンツを表示、またタグごと取り換えると遅いということで、imageタグ内のsrc属性を書き換えていくような実装をしていました。
その際2連続で同じ画像を出した時にiphoneユーザーだけうまく動かず、その調査の備忘録です。

実験

こんなスクリプトをブラウザのコンソールに読ませます。これによりページのimgタグの最初の1つに、onload時にコンソールにメッセージが出るイベントが付与されます。

const img = document.getElementsByTagName("img")[0]

img.addEventListener('load', function() {
  console.log('load!')
}, false);

これを適当なimgタグのあるサイトで流したあと、さらにこのスクリプトを2回流します。imgに適当な画像のurlを埋め込んでいます。

// googleのロゴ
img.src = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";

この時、2回目でload!と出力されるかを各ブラウザで調べました。

結果

ブラウザ	OS	結果
chrome 92.0.4515.159	windows 10 21H1	2回表示
Firefox 90.0.2	windows 10 21H1	2回表示
Edge 92.0.902.84	windows 10 21H1	2回表示
chrome 91.0.4472.114	mac Catalina 10.15.2	2回表示
Firefox 89.0	mac Catalina 10.15.2	2回表示
safari13.0.4 (15608.4.9.1.3)	mac Catalina 10.15.2	1回表示

結論

__safariではimgのsrcに元と同じurlを与えたときに、onloadイベントが発火してくれない。__ということがわかりました。対策としてはurlを与える前に空文字をあたえる処理を挟むなどすると良いです。ブラウザ依存でアプリケーションがうまく動かないパターンは開発者泣かせなので、なんとなく記憶の片隅においていただけると良いかもしれません。