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

Question

我有这个菜单（网站文本也会出现这种情况）

 <div id="container" class='container'>
        <div class='meta-background'></div>
    <section class='meta-container'>
            <div class="meta-menu meta-menu-top">
                <ul>
                    <li>testsas</li>
                    <li>fdadasdasdas</li>
                    <li>dsdasdsadasdsa</li>
                </ul>
                <span class="meta-title">WEBSITE</span>
            </div>



            <div class="meta-menu meta-menu-bottom"></div>
    </section>
    </div>

css:

/* contaner */


/* * { padding:0; margin:0; box-sizing: border-box;} */

.container {
    max-width: 2380px;
    margin-left: auto;
    margin-right: auto;
}

.meta-container {
  display: flex;
    /* -webkit-box-pack: center; */
    /* -ms-flex-pack: center; */
    justify-content: center;
}

.meta-background {
    position: fixed;
    margin-left: auto;
    margin-right: auto;
    z-index: -1;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-filter: blur(10px);
    filter: blur(10px);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* background-image: url('./assets/img/3.jpg'); */
}

.meta-title {
    color: white;
    position: absolute;
    bottom: 10px;
    display: block;
}


/* menus */

.meta-menu-top {
    background: #252422;
    color: #959595;
    border-radius: 0px 0px 10px 10px;
    /* top: 0px; */
    position: absolute;
    height: 48%;
    width: 360px;
    opacity: 0.7;
    display: flex;
    justify-content: center;
}

.meta-menu-top ul {
    padding: 0;
    margin-top: 30%;
}

.meta-menu-top li {
    list-style-type: none;
    display: block;
}

.meta-menu-bottom {
    background: #eef1f5;
    color: white;
    border-radius: 10px 10px 0px 0px;
    /* bottom: 0px; */
    position: absolute;
    height: 48%;
    width: 360px;
}

和 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;
        }
    });

在这里编写代码：https://codepen.io/giventofly/pen/RxMRMR

在 chrome 上工作正常，在 Firefox 上，元菜单顶部/底部被推到左侧并重新排列到中心。

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

可能是什么？

Answer 1

由于您将position: absolute 用于顶部和底部菜单，因此您无需将display: flex 用于父元素。下面是一个工作代码示例（稍微简化）。

var metaContainer = document.querySelector('.meta-container');
var menuTop = document.querySelector('.meta-menu-top');
menuTop.onclick = close;

function close() {
  metaContainer.classList.toggle('closed');
}

body {
  overflow: hidden;
}

.meta-menu {
  left: 50%;
  transform: translateX(-50%);
}

.meta-menu-bottom,
.meta-menu-top {
  height: 48%;
  position: absolute;
  width: 360px;
  transition: 300ms;
}

.meta-menu-top {
  align-items: center;
  background: #252422;
  color: #959595;
  display: flex;
  border-radius: 0px 0px 10px 10px;
  justify-content: center;
  opacity: 0.7;
  text-align: center;
  top: 0;
}

.meta-menu-top ul {
  padding: 0;
  margin-bottom: 30px;
}

.meta-menu-top li {
  list-style-type: none;
}

.meta-title {
  color: white;
  bottom: 10px;
  left: 0;
  position: absolute;
  width: 100%;
}

.meta-menu-bottom {
  background: #eef1f5;
  bottom: 0;
  border-radius: 10px 10px 0px 0px;
  color: white;

}

.closed .meta-menu-top {
  top: -48%;
    margin-top: 35px;
}

.closed .meta-menu-bottom {
  bottom: -48%;
  margin-bottom: 30px;
}

<div id="container" class='container'>
  <div class='meta-background'></div>
  <section class='meta-container'>
    <div class="meta-menu meta-menu-top">
      <ul>
        <li>testsas</li>
        <li>fdadasdasdas</li>
        <li>dsdasdsadasdsa</li>
      </ul>
      <div class="meta-title">WEBSITE</div>
    </div>

    <div class="meta-menu meta-menu-bottom"></div>
  </section>
</div>

Answer 2

似乎有一个Firefox-specific bug TweenMax 元素在页面中居中的方式是使用弹性显示，这完全没问题。但是，当未指定左侧样式时，Firefox 渲染存在重大问题。这就是导致两个动画元素随机移动的原因。

解决这个问题的一个简单方法是为你的元素指定一个左值；即添加下面的CSS。或者，您可以避免使用 display flex，除非它对您很重要。

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

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

这是更新后的CodePen