【CSS備忘録】Safariでtransformやアニメーション使用時に残像が残ってしまう現象の対処法

2023年10月13日　Posted　遠藤(フロントエンドエンジニア)

最近ではCSSでtransformやアニメーションを使用することが当たり前のようになっています。
CSSのtransformを使用した際にSafariで残像が残ってしまう謎現象に苦しめられたので備忘録的に対処方法を残します。

現象について

ページトップへ戻るボタンをCSSでtransformを使用してひし方で実装しましたが、スクロール時にMacやiPhoneのSafariで残像が残る現象が発生しました。transformやアニメーションを使用した際に同現象が起こりやすいと言われています。

Safariでスクロール時に残像が残ってしまう

対象となる要素にCSSで

transform: translate3d(0, 0, 0);

を指定することで解決しました。
translate3d()を使用しますと、ブラウザーのGPU処理がされアニメーションが滑らかになることで解消すると言われています。

同じような現象に遭遇した際は試してみてください！