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

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

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

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

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

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

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

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

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

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

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

Creator Note