在firefox中设置以固定位置为中心的div动画时，如何防止jquery动画水平位置跳转

我有一个页面，当使用jqueryanimate单击其标题栏时，该页面底部会弹出一个框

弹出框设置为位置固定且居中。在chrome中，当点击标题时，框会按预期滑出，但在firefox中，当它设置动画时，框会跳到右侧

firefox中的jquery似乎存在某种缺陷，它决定了页面的宽度，包括socrollbar。当有滚动条时，这会导致位置移动，但我无法在保持弹出功能的同时找到解决方法

Firefox和Chrome都更新为最新版本

我还包括演示中的代码：

#支架{
位置：相对位置；
宽度：300px；
高度：1400px；
保证金：0自动；
边框：1px纯黑；
}
#酒吧{
位置：固定；
宽度：300px；
高度：200px；
边框：1px实心#C0C0；
背景色：#C0；
底部：-170px；
左：50%；
左边距：-150px；
}
#标题{
宽度：100%；
高度：30px；
背景色：#600000；
}

var open=false；
$（“#标题”）。单击（函数（）{
如果（打开==错误）{
$（“#条”）。设置动画({
“底部”：“0px”
});
开放=真实；
}否则{
$（“#条”）。设置动画({
“底部”：“-170px”
});
开=假；
}
});

我在更新修补程序时，您可能需要修改HTML

---

这与您的问题无关，但您在这里有一个输入错误：position:relative；{position}

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