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 を使おう。