tamakipedia

フロントエンドエンジニア。Typescriptもう特訓中です。一日の振り返りや学んだことをちょっとずつ吐いています。

【css】translate3dを使うとアニメーションのちらつきを抑えることができる

今作っているティザーサイトなのですが、
スクロールを縦じゃなくて横にスクロールできるようにする「水平スクロール」にしました。

translateXでスクロールしていたのですが、スマホでみるとガタガタとチラついてしまいました。

それがtranslate3dにすると解決しました。

流石にびっくりした。。。

GPUアクセラレーション

translate3dにするとGPUアクセラレーションと呼ばれるものが有効になります。
GUIアクセラレーションとは、グラフィックの処理に特化したGPUがCPUの代わりに処理を行ってくれることです。

つまり

translateX → CPUが処理 → チラつく  
translate3d → GPUが処理 → 滑らか

GPUアクセラレーションを有効にして、cssの処理をすると
ページのレンダリングが速くなり、ページ表示が高速化されます。

おしまい!