jQueryのslideDownのアニメーションがガタつく

jQuery練習中、アニメーション練習としてアコーディオンパネルみたいなものを作ってて気付いた。

slideDownが、なんかガタガタ動く。

具体的には、真ん中らへんまではスムーズに動くんだけど、そこから止まって一気に全部開くといった感じ。

slideUpは問題なく滑らかに動くのに、slideDownが美しくなさすぎて困った。

配信でリスナーさんに教えてもらった下記のサイトで解決した！

http://www.giz.jp/?p=728

どうやら、slideDownを使用している親の要素に、position: relative を指定すると問題は解消するようだ。

原因が分からないのが気持ち悪いけど…。

比較用に作ったのでおいてみた。

上部のパネルが元のガタつく状態。

下部のパネルが、CSSで position:relative を指定した状態。

手元の環境(IE9,Chrome,FireFox)では上部パネルは全部がたついた。

んー何が原因なんだろ…。
まぁとりあえず解決したので良しとするけど、時間があったら調べたいところ。