jquery - jQuery.animate を使用して要素の位置 (CSS の左、右、上、下) を変更すると、Firefox の動作がおかしくなる

Question

Firefox で次のフィドルを検討してください: http://jsfiddle.net/rawKC/1/

赤い四角形をクリックして、どのように動くかを確認します。すぐに消え、頂上のどこかでどこからともなくさえずり、適切な終点で停止します。予期される動作 (たとえば、Chrome で見られるように) は、animate 呼び出しで指定されたサイズを変更しながら、直線で終点まで移動することです。

四角形は、左、右、上、および下の属性を使用して絶対配置されます。これは、そのサイズが決定される方法でもあります。クリックすると、ラッパーの配置属性が変更されます。アニメーションが Firefox で機能しない理由がわかりません。

いくつかの回避策が考えられますが、この特定のユース ケースの何が問題なのかを突き止めたいと思います。誰かアイデアがありますか？

編集

包含要素のスタイリングはまったく重要ではないようです。動く要素だけがおかしい。それに応じて質問とフィドルを更新しました。

参照用のコード スニペット:

<div id="wrapper"></div>

$(function() {
    var $wrapper = $('#wrapper');

    $wrapper.click(function() {
        $wrapper.animate({
            bottom: '85%',
            left: '2%',
            right: '75%',
            top: '2%'
        });
    });
});

#wrapper {
    bottom: 35%;
    left: 18%;
    position: absolute;
    right: 18%;
    top: 35%;
}