なんでも短く書けば良いってもんじゃないらしい

javascriptでアニメーションをガリガリ書いてると、開発用のモンスターマシンとテスト用の貧弱スペックマシンで明らかに挙動が違って見えることがあります。それで嵌った所があったのでメモ。

要素のpositionをrelativeからabsoluteに切り替えつつ、見た目上の位置は変えないというコード。
こんな感じ。

// 基準とする親
var parent = $('parent');

// 動かしたい要素
var elem   = $('hoge');

// relative → absolute 切り替え
elem.style.position = 'absolute';

// 見た目上の位置は変えない
elem.left = 10 + getOffsetLeft(parent); //自前の関数

すると低スペックマシンだと、見た目の位置が変わらないはずの要素の中身のプルダウン(select要素)だけが一瞬ガタつきます。
どうやらgetOffsetLeft関数の実行に時間がかかる(70ms程度)せいで、+10か0 の状態で一旦画面の描写がされてしまう模様。解決策としたのが、一旦計算結果を変数に格納した次のコード。

var leftPosition = 10 + getOffsetLeft(parent);//時間がかかる
elem.style.position = 'absolute';
elem.left = leftPosition;

要素の位置を設定する時は、右辺で計算しないで、一旦変数に格納してからセットした方が良さそう。

2008/06/16追記
というか、座標計算はあらかじめ済ませておいてpositionのプロパティを切り替えると同時にtop, leftの値の再セットするだけの方がスムーズだという当たり前の話ですね。