🍢

SVGや動画の描画がシャキッとしない場合の処方箋

に公開

GPUレンダリングを促す

transform: translateZ(0);
または
transform: translate3d(0,0,0);

これでsvg画像でもmp4動画でも描画が改善する(効果のほどは諸々条件による)
特に動画では、GPU加速 - ビデオレンダリングをGPUで処理してパフォーマンス向上

+アニメーションの場合

will-change: transform;

上記を追加することで、
transform変化を事前通知してブラウザの描画処理を最適化できる

⚠️ 注意点:

will-changeはメモリを多く消費するため多用しない!(1ページ内で~4要素程度が目安)

Discussion