Flexbox not working correctly - seems that dom is recalculated

Question

I have this menu (this happens also with the website text)

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

and the JS to hide/show the menu

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

codepen here: https://codepen.io/giventofly/pen/RxMRMR

on chrome works okay, on firefox the meta-menu-top/bottom are pushed to the left and rearranged to center again.

tried with the webkit/moz prefix and even using normalize.css with no results.

what could be?

Answer 1

It seems that there is a Firefox-specifc bug TweenMax The way that the elements are centered in your page is by the use of the flex display, which is totally fine. However, Firefox rendering has major issues when the left style being unspecified. This is what causes both animated elements to randomly move.

A simple way to overcome this issue is to specify a left value for your element; i.e. add the css below. Or alternatively, you can avoid the use of display flex, unless it is important for you.

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

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

Here is an updated CodePen

Answer 2

Since you use position: absolute for top and bottom menus, you have no need to use display: flex for the parent element. Below is an example of working code (a little simplified).

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>