transform プロパティでcssがガタつくときの対処法

こんにちは!まだまだ寒いですね!
早くあたたかくなってほしい…。

 

今回は、CSS TransformsでCSS Animation/Transitionと組み合わせて要素を動かしているときに発生する
ガタつき(?)をの対処法をご紹介します。

 

3つの対処法

 

1. “-webkit-backface-visibility:hidden;”と”backface-visibility:hidden;”を指定する

 

div {
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
}

 

さくっと直したいときはこれ。効果の高い対処方法です。
これを入れておけば大体のがたつきが解消されるはず。
でも疑問なのが2D Transformsにも有効であること。関係ないプロパティのはずなんですけどね笑

 

2. “-webkit-backface-visibility:hidden;”と”backface-visibility:hidden;”と”overflow:hidden”の3つを指定

 

div {
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
overflow:hidden

 

1を指定してもガタつきがなおらない場合は、『backface-visibility:hidden;』『overflow:hidden』のどちらも指定してみてください。
なおる場合がほとんどです。

 

3.”visibility:hidden;”で要素を隠す

非表示にする要素があるとき(Off Canvasなど)には『visibility:hidden;』を指定し、
表示するときには『visibility:visible;』を指定するだけでもガタツキが治ったりします。

 

 

アニメーションのガタつきがなくなるのは、3D に関するプロパティを指定するとブラウザは通常の処理を行っているCPUから、
アニメーションをスムーズに実行できるGPUを使用するようになるからのみたいです。

 

ブラウザのサポートについて

 

2018年時点でのブラウザのサポート状況を調べると、
一応全ての主要ブラウザで、ベンダープレフィクスなど気にすることなく利用できるみたいです。

ガタついたときには使ってみるといいかもしれませんね!