top-right-bottom-left (TRBL) と translate の違いまとめ

CSS には、位置を指定するプロパティが大きく分けて2つある。
top-right-bottom-left (TRBL) と translate である。
多くの場合、レイアウトには TRBL さえ使えば十分だが、 translate には様々なメリットがあるから、
状況によって使い分けることで、 CSS に強いマンになれる。

描画方法

一般に、 TRBL が CPU で描画するのに対し、 translate は GPU によって描画される

ピクセルスナッピング

TRBL は、描画される際に、ピクセルの小数点以下が丸め込まれ、整数値として処理される。
対して、 translate はサブピクセルレンダリングをサポートする。

リフロー

ブラウザは、 DOM の内容やレイアウトが更新されるとき、 DOM の再配置を行う、リフローと呼ばれる処理を行う。
このリフローは、一般に高負荷である。
TRBL では、 position: absolute 以外、このリフローが行われる。
対して、 translate ではリフローは呼ばれない。

対応ブラウザ

TRBL が全ブラウザが対応しているのに対して、 translate は IE9 以降の対応となる。

結論

動かす場所では、 translate を使おう。