base64化されたgifをsafariで読み込むとうまく再生されないバグの対処法

概要

// base64化されたgif
const data = "data:image/gif;base64,fogefogefoge"
setTimeout(() => {
  $("img").attr("src", data)
}, 1000)

上記のようなプログラムのとき、safari(mac、ios両方)だと再読み込み時にgifが止まってしまうバグに遭遇しました。

対処法

どうやらsafariがbase64化されたgifをキャッシュするような挙動をしていました。

metaタグやサーバーの設定でキャッシュを無効化してもキャッシュされるため、base64の文字列に乱数を加えて、キャッシュされないようにします。

const getCharset = () => {
  const n = Math.floor(Math.random() * 1000)
  return `charset=${n}`
}

const data = `data:image/gif;${getCharset()};base64,fogefogefoge`
setTimeout(() => {
  $("img").attr("src", data)
}, 1000)

charsetは本来文字コードを指定するものですが、無効な文字列を指定しても動くため、そこに乱数を指定します。

これで、base64化されたgifをキャッシュされないため、再読み込み時にもgifが止まらなくなりました。

最後に

再現性がなかったため本番のソース以外で動作を確認できませんでしたが。。

同じような状況に陥ってる人の助けになったら幸いです☺️

参考

• Base64 - Wikipedia
• データ URL - HTTP | MDN