🐑
初めてAPNGを使った時のバグ対応
初めてAPNGを使用したときに起きたバグ？に対応した備忘録です。
APNGとは
Animated Portable Network Graphicsの略でアニメーションするPNG画像のこと。
Mozillaによって最初に導入されたファイル形式で、 PNG規格を拡張してアニメーション画像の対応を追加された。
アニメーションGIFと比べて、色数の制限や輪郭のジャギーなど品質面の制限が少ない。
APNGのサポート環境
2022/3月 現在
ほとんどのブラウザでサポートがされてきましたが、IEなどでは使用できません。
実際に起きた現象
APNGを使用してみるとSafariで問題が起きました。
サイトにアクセスした１回目は正常にアニメーションしますが、２回目以降やリロード時にアニメーションが発生しませんでした。
スーパーリロードすれば動いた時もありますが、一般ユーザにスーパーリロードをお願いするわけにもいかず改善方法を検討しました。
改善方法
画像にパラメータをつけて、リロードする度にAPNG画像を読み込み直すようにしました。
app.ts
cache() {
const randomNumber = Math.floor(Math.random() * 100);
const pcApng = this.elms.cachePc.getAttribute('src');
this.elms.cachePc.setAttribute('src', pcApng + '?' + randomNumber);
}
他に試した改善策
apng-canvas.jsでAPNGを読み込む設定を書けばいけるかなと思いましたが、こちらでは解決できませんでした。
参考
Discussion