getBoundingClientRectとOffesetWidth系(javascript)

JavaScript

どっちも同じような値が取れると思っていたら微妙に違いました。
getBoundingClientRectはtransformを計算した値が返るのに対し、
element.offsetWidthはtransform関係なく、元要素の幅が返りました。

<div style="width: 200px;"></div>

transform: scale(0.9);

の場合、
element.getBoundingClientRect().width は180
element.offsetWidthは200が返ります。

微妙に位置計算がズレる、というときはcssのtransformを疑う必要もあるみたい。

コメント