Safariはアルファチャンネル付きAnimated WebPを正しくレンダリングできない場合がある
まとめ
一部のアルファチャンネル付きのAnimated WebPをSafariで表示するとバグる
ブレンドが有効で前フレームを破棄しないタイミングがあると発生する模様
https://bugs.webkit.org/show_bug.cgi?id=217897 ※2023-05-24 16.5時点
安全な形式選択、もしくは正常に表示できる Animated WebP の作成方法は以下を参考のこと
ブラウザ互換性の高いメディア形式の選択早見表
Safariで表示できるアルファチャンネル付きAnimated WebPの作り方
詳細
少なくとも確認時点 macOS Ventura 13.x や iOS 16 に含まれる Safari 16.5 (Webkit) では、一部のアルファチャンネル付きの Animated WebP のレンダリング結果が壊れる事象がある
具体的な現象としては、半透明部分に前のフレームの描画結果が残ったり、再生時間の蓄積で再生速度が低下していく
webpmux を使用して不具合の出る画像を見てみると blend: yes で前フレームの情報を使用して圧縮されており、disposeの指定が none や background とまちまちであることがわかる
WebP 紹介ページに有るサンプルは正常に表示されるが、これはフレームのブレンドが全て無効でフレームを破棄する設定が有効なため
https://storage.googleapis.com/downloads.webmproject.org/webp/images/dancing_banana2.lossless.webp
code:sh
❯ webpmux -info ./dancing_banana2.lossless.webp
Canvas size: 990 x 1050
Features present: animation transparency
Background color : 0x00FFFFFF Loop Count : 0
Number of frames: 8
No.: width height alpha x_offset y_offset duration dispose blend image_size compression
1: 630 870 yes 240 180 100 background no 466 lossless
2: 750 930 yes 180 120 100 background no 528 lossless
3: 960 1050 yes 30 0 100 background no 762 lossless
4: 810 990 yes 30 60 100 background no 558 lossless
5: 630 870 yes 120 180 100 background no 468 lossless
6: 750 930 yes 60 120 100 background no 532 lossless
7: 960 1050 yes 0 0 100 background no 756 lossless
8: 810 990 yes 150 60 100 background no 554 lossless
解決方法
アルファチャンネルを含む画像として扱う必要がある場合は
すべてのフレームでblend: no なフレーム情報を持つ Animated WebP を作成する
もしくは APNG を使用する
動画として組み込める場合は video タグを使いつつ Safari では アルファチャンネル付き HEVCを使用し、それ以外では WebM を表示すると良い
透過情報付き HEVC の圧縮率はビットレートにもよるが、Animated GIF と比較して 2/3 ほどになるのでファイルサイズは自体は若干削減できる
またアルファチャンネルを破棄できるなら、そのほうがより効率よく圧縮できる
関連
アルファチャンネル付きHEVCのエンコード方法
Macで透過HEVCに変換する方法 - Potewoのブログ