如何防止jquery動畫水平位置跳動時在動畫中固定位置居中div在Firefox中

Question

我有一個頁面，當它的標題欄使用jquery動畫單擊時，從底部彈出框。

彈出框被設置爲位置固定並且居中。在Chrome中，點擊標題時，框會按預期滑出，但在Firefox中，它在動畫時跳到右側。

Firefox中似乎存在某種與jquery相關的錯誤，它正在確定包括socolobar在內的頁面寬度。這是導致一個位置移動時，有一個滾動條，但我不能繞過它的方式，同時保持彈出功能。

Firefox和Chrome都更新爲最新版本。

here is a tinker.io link that demonstrates the issue

我還包括來自演示代碼：

#holder{ 
position:relative; 
width:300px; 
height:1400px; 
margin:0 auto; 
border:1px solid black; 
} 


#bar{ 
position:fixed; 
width:300px; 
height:200px; 
border:1px solid #C0C0C0; 
background-color:#C0C0C0; 
bottom:-170px; 
left:50%; 
margin-left:-150px; 
} 

#header{ 
width:100%; 
height:30px; 
background-color:#600000; 
} 

<div id="holder"></div> 

<div id="bar"> 
<div id="header"></div> 
</div> 

<script> 
    var open = false; 

    $("#header").click(function(){ 
    if (open == false){ 
    $("#bar").animate({ 
     "bottom" : "0px" 
    }); 

    open = true; 
    }else{ 
    $("#bar").animate({ 
     "bottom" : "-170px" 
    }); 

    open = false; 
    } 
    }); 
</script> 

Answer 1

，因爲我已經在http://tinker.io/e8bb6/9

<div id="holder"> 
    <div id="bar"> 
     <div id="header"></div> 
    </div> 
</div>