jquery - Firefox の正しい位置とスクロール バー

Question

div 位置を正しくアニメーション化すると、奇妙な動きになります。Firefox で、div が右に配置されていて、スクロール バーがある場合にのみ発生します。なぜそれが起こり、どうすれば解決できますか？

• Firefoxのみ
• 正しい位置
• スクロールバー付き

ここで、チェックするために単純化された例: http://jsfiddle.net/LhAEh/1/

HTML:

<div id="blue"></div>
<div id="red"></div>

CSS:

#red {
    position: fixed;
    bottom: 20px; right: 25px;
    width:80px; height:50px;
    cursor:pointer; 
    background:red;
}

#blue {/*this div is just to create a scroll*/
    margin:0 auto;
    width:80px; height:500px;
    background:blue;
}

jQuery:

$(function(){

    $("#red").click(function() {
        $("#red").animate({bottom:'-80px'},1000);
    });

})