【css】translate3dを使うとアニメーションのちらつきを抑えることができる
今作っているティザーサイトなのですが、
スクロールを縦じゃなくて横にスクロールできるようにする「水平スクロール」にしました。
translateXでスクロールしていたのですが、スマホでみるとガタガタとチラついてしまいました。
それがtranslate3dにすると解決しました。
流石にびっくりした。。。
GPUアクセラレーション
translate3dにするとGPUアクセラレーションと呼ばれるものが有効になります。
GUIアクセラレーションとは、グラフィックの処理に特化したGPUがCPUの代わりに処理を行ってくれることです。
つまり
translateX → CPUが処理 → チラつく translate3d → GPUが処理 → 滑らか
GPUアクセラレーションを有効にして、cssの処理をすると
ページのレンダリングが速くなり、ページ表示が高速化されます。
おしまい!