视口宽度适用于Chrome，但在Firefox上表现得很奇怪

Question

我遇到了问题。这是我使用jQuery的第一天，并决定将vw / vh作为度量单位。

当我运行Chrome时，一切顺利，但如果我使用Mozilla，我会在点击div后看到一些错误。

以下是jsfiddle

的链接

$('.button2').click(function() {
  $(this).toggleClass('active');
  if ($(this).hasClass('active')) {
    $('#expand_me').addClass('hidden');
    $('#description').animate({
      "margin-top": "-=250px",
    }, 1000);
    $('#drag').animate({
      "left": "+=80vw",
      "width": "20vw"
    }, 1000);
    $('#drag').addClass("right-bar");
    $('.menu').removeClass("not-visible");

  } else {


    $('#description').animate({
      "margin-top": "+=250px",
    }, 1000);
    $('#drag').animate({
      "left": "-=80vw",
      "width": "3vw"
    }, 1000);
    $('#expand_me').removeClass('hidden');
    $('#drag').removeClass("right-bar");
    $('.menu').addClass("not-visible");
  }

});

$('.button1').click(function() {
  $(this).toggleClass('active');
  if ($(this).hasClass('active')) {
    $(".description").addClass('hidden-right');
    $('#name').animate({
      "margin-top": "-=250px",
    }, 1000);
    $('#drag').animate({
      "left": "-=80vw",
      "width": "20vw"
    }, 1000);
    $('#drag').addClass("left-bar");
    $('.menu').removeClass("not-visible");

  } else {


    $('#name').animate({
      "margin-top": "+=250px",
    }, 1000);
    $('#drag').animate({
      "left": "+=80vw",
      "width": "3vw"
    }, 1000);
    $('.description').removeClass('hidden-right');
    $('#drag').removeClass("left-bar");
    $('.menu').addClass("not-visible");

  }

});

  * {
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: "Oxygen", sans-serif;
}

.container {
  width: 100%;
}

.header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

#drag {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin: 0 auto;
  height: 100vh;
  width: 3vw;
  -webkit-box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.83);
  -moz-box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.83);
  box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.83);
  display: inline-block;
}

.left-bar {
  background-color: #FFF;
}

.right-bar {
  background-color: #648D96;
}

.name {
  flex: 1 1 auto;
  background-color: #648D96;
  height: 100vh;
  width: 50%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -ms-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
}

.description {
  flex: 1 1 auto;
  background-color: #E7EAEE;
  height: 100vh;
  width: 50%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -ms-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
}

.hidden {
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -ms-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
  position: absolute;
  width: 0%;
  margin-left: -500px;
}

.hidden-right {
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -ms-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
  position: absolute;
  right: 0;
  width: 0%;
  margin-top: -1500px;
}

.menu {
  margin-top: 10vh;
}

.menu a {
  display: inline-block;
  text-decoration: none;
  color: #000;
}

.menu li {
  display: block;
  padding: 30px;
  font-size: 1em;
}

.menu a:hover {
  color: rgba(0, 0, 0, .5)
}

.not-visible {
  display: none;
  margin: 0 auto;
}

.button1 h1 {
  color: #fff;
  font-size: 2em;
  cursor: pointer;
}

.button1 h1:hover {
  color: #E4EAEC;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.button2 h1:hover {
  color: #648D96;
  text-shadow: 2px 2px 6px rgba(150, 150, 150, 1);
}

.button2 h1 {
  color: #000;
  font-size: 2em;
  cursor: pointer;
}

#name {
  padding: 30px;
  border: 2px solid #E7EAEE;
}

#description {
  padding: 30px;
  border: 2px solid #648D96;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <div class="container">
    <div class="header">
      <div id="drag">
        <div id="left-bar">

          <ul class="not-visible menu" id="menu">
            <h1>Menu</h1>
            <li><a href="#about">About</a></li>
            <li><a href="">About</a></li>
            <li><a href="">About</a></li>
            <li><a href="">About</a></li>
          </ul>
        </div>
        <div id="right-bar">

        </div>
      </div>
      <div class="name" id="expand_me">

        <div class="button1">
          <h1 id="name">Krzysztof<br>Jedras </h1>
        </div>
      </div>
      <div class="description" id="">
        <div class="button2">
          <h1 id="description">The<br>Front Man</h1>
        </div>

      </div>
    </div>
  </div>
</header>