Css Flexbox无法正常工作-dom似乎已重新计算

我有这个菜单（这也发生在网站文本中）

和JS来隐藏/显示菜单

   let menutop = $('.meta-menu-top'),
        menubottom = $('.meta-menu-bottom');
    //set cookie for future preference
    //
    //
    //get cookie if first run or not
    //
    //

    let upDown = 0,
    duration = 1;

    let tlshow = new TimelineMax({ paused: true });
    tlshow.fromTo(menutop, duration, {top: '-40%' } ,{ top: 0, ease: Power3.easeInOut })
        .fromTo(menubottom, duration, { bottom: '-40%' },{ bottom: 0, ease: Power3.easeInOut }, '-=' + duration);

    let tlhide = new TimelineMax({ paused: true });
    tlhide.fromTo(menutop, duration, { top: 0 } ,{ top: "-40%", ease: Power3.easeInOut })
        .fromTo(menubottom, duration, { bottom: 0 },{ bottom: "-40%", ease: Power3.easeInOut }, '-=' + duration);


    menutop.on("click",function(){
        console.log("CLICKED MENUTOP");
        if(upDown == 0) {
            tlhide.restart();
            upDown = 1;
        }
        else {
            tlshow.restart();
            upDown = 0;
        }
    });

代码笔在这里：

在chrome上可以正常工作，在firefox上，元菜单的上/下部分被推到左边，并重新排列到中间位置

尝试使用webkit/moz前缀，甚至使用normalize.css都没有结果

---

可能是什么

由于对顶部和底部菜单使用了

position:absolute

，因此不需要对父元素使用

display:flex

。下面是一个工作代码示例（稍微简化）

var metaContainer=document.querySelector（'.meta-container'）；
var menuTop=document.querySelector（'.meta-menu-top'）；
menuTop.onclick=关闭；
函数关闭（）{
metaContainer.classList.toggle（'closed'）；
}

正文{
溢出：隐藏；
}
.元菜单{
左：50%；
转化：translateX（-50%）；
}
.元菜单底部，
.元菜单顶部{
身高：48%；
位置：绝对位置；
宽度：360px；
过渡时间：300ms；
}
.元菜单顶部{
对齐项目：居中；
背景:#252422；
颜色：#9595；
显示器：flex；
边界半径：0px 0px 10px 10px；
证明内容：中心；
不透明度：0.7；
文本对齐：居中；
排名：0；
}
.meta menu top ul{
填充：0；
边缘底部：30px；
}
.元菜单顶李{
列表样式类型：无；
}
.元标题{
颜色：白色；
底部：10px；
左：0；
位置：绝对位置；
宽度：100%；
}
.元菜单底部{
背景：#eef1f5；
底部：0；
边界半径：10px 10px 0px 0px；
颜色：白色；
}
.关闭.元菜单顶部{
前-48%；
利润上限：35px；
}
.关闭.元菜单底部{
底部-48%；
边缘底部：30px；
}

testsas
FDADASDAS
DSDASDASDSA

网站

似乎有一个特定于Firefox的bug 元素在页面中居中的方式是使用flex显示，这是完全正确的。但是，如果未指定左侧样式，Firefox呈现会出现重大问题。这就是导致两个动画元素随机移动的原因

克服这个问题的一个简单方法是为元素指定一个左值；i、 e.在下面添加css。或者，您可以避免使用display flex，除非它对您很重要

.meta-menu-top {
    left: calc(50% - 180px);
}

.meta-menu-bottom {
    left: calc(50% - 180px);
}

---

这是一个更新的

，因为打开动画开始时会出现滚动条。尝试添加

正文{overflow:hidden；}

。尝试后，它卡在左侧。使用检查器时，即使手动移动顶部，它也会向左移动。尝试溢出：隐藏在菜单上，相同的结果将选择此作为最佳答案，尽管@Sam使用了相同的方法进行修复。

   let menutop = $('.meta-menu-top'),
        menubottom = $('.meta-menu-bottom');
    //set cookie for future preference
    //
    //
    //get cookie if first run or not
    //
    //

    let upDown = 0,
    duration = 1;

    let tlshow = new TimelineMax({ paused: true });
    tlshow.fromTo(menutop, duration, {top: '-40%' } ,{ top: 0, ease: Power3.easeInOut })
        .fromTo(menubottom, duration, { bottom: '-40%' },{ bottom: 0, ease: Power3.easeInOut }, '-=' + duration);

    let tlhide = new TimelineMax({ paused: true });
    tlhide.fromTo(menutop, duration, { top: 0 } ,{ top: "-40%", ease: Power3.easeInOut })
        .fromTo(menubottom, duration, { bottom: 0 },{ bottom: "-40%", ease: Power3.easeInOut }, '-=' + duration);


    menutop.on("click",function(){
        console.log("CLICKED MENUTOP");
        if(upDown == 0) {
            tlhide.restart();
            upDown = 1;
        }
        else {
            tlshow.restart();
            upDown = 0;
        }
    });

.meta-menu-top {
    left: calc(50% - 180px);
}

.meta-menu-bottom {
    left: calc(50% - 180px);
}