canvasサイズを連続的に変更すると再レンダリング時に黒くチラつく(フリッカー)不具合を修正

[aomona]

概要

canvasの大きさ(width/height)を連続的に変更すると、そのたびに再レンダリングが走り、画面が黒くビカビカと激しくチラつく不具合が発生しています。

再現手順

1. grain-gradientをcanvasに適用した状態でページを表示する
2. ウィンドウリサイズやコンテナサイズの変更などで、canvasのサイズを連続的(高頻度)に変更する
3. サイズ変更のたびに黒いフレームが挟まり、チラつきが発生する

期待する動作

canvasサイズが連続的に変化しても、黒フレームの点滅なくスムーズに描画が継続されること。

想定される原因

• サイズ変更のたびにcanvas/WebGLコンテキストの再初期化やクリアが発生し、次のフレームが描画されるまでの間、黒(未描画)の状態が一瞬表示されている可能性がある
• リサイズ処理がデバウンス/スロットルされておらず、リサイズイベントの度に重い再レンダリング処理が走っている可能性がある

対応案

• リサイズ時にcanvasをクリアせず、直前のフレームを保持したまま新しいサイズで再描画する
• リサイズハンドラにデバウンス/rAFベースのスロットリングを入れる
• WebGLコンテキストの再生成が必要な場合は、再生成前後で描画が途切れないようにする