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

似乎有一个火狐特有的bug TweenMax，元素在页面中的中心方式是使用flex显示，这是完全可以的。但是，当左样式未指定时，Firefox呈现会出现重大问题。这就是导致两个动画元素随机移动的原因。

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

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

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

下面是更新的CodePen

Answer 2

由于对顶部和底部菜单使用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>

​