title: overflow : hidden not working on Firefox
body: <p>I am using the fullPage JS plugin along with the parallax JS plugin. There is an animation which features circles expanding and the parallax on it. I need to hide the circles and am using <code>overflow:hidden</code> to hide the expansion on other sections. The overflow hidden works perfectly on chrome and safari but is not working on Firefox.</p>
  
  <p>I have tried reading a lot of questions on Stack&nbsp;Overflow which had a similar issue and I tried out all the solutions but none of them worked.</p>
  
  <p>link to the webpage: <a href="https://rimildeyjsr.github.io/spotify-circle-animation" rel="nofollow noreferrer">https://rimildeyjsr.github.io/spotify-circle-animation</a></p>
  
  <p>I am attaching code for one section, if this works I can get it to work on the other sections as well - the code is similar for all sections.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
  
  $(document).ready(function() {
      const scene = document.getElementById('fullpage');
      const parallax = new Parallax(scene, {
          invertX: true,
          invertY: true,
          limitX: 35,
          limitY: 35
      });
  
      $('#fullpage').fullpage({
  
          anchors: ['home', 'about', 'projects', 'contact'],
  
          fixedElements: '#toggle,#overlay',
  
          afterLoad: function(anchorLink, index) {
  
              if (index === 1 || anchorLink === 'home') {
                  callMakeDiv('#1f3264', 1);
              } else if (index === 2 || anchorLink === 'about') {
                  $('#section2 h1').addClass('come-in').one(animationEnd, function() {
                      $('#section2 h3').addClass('come-in').one(animationEnd, function() {
                          $('#section2 p').addClass('come-in');
                      });
                  });
                  callMakeDiv('#f573a0', 2);
              } else if (index === 3 || anchorLink === 'projects') {
                  callMakeDiv('#1f3264', 3);
              } else if (index === 4 || anchorLink === 'contact') {
                  $('.left').addClass('animateRightSlide');
                  $('.right-large').addClass('animateLeftSlide');
                  callMakeDiv('#f573a0', 4);
              }
          }
      });
  
      $("#main-heading").delay(2000).css("visibility", "visible").typed({
          strings: ["^1000Hello,", "Bonjour,", "Hola,", "nuqneH,", "Ola,", "Hallo,", "سلام", "Ciao,"],
          typeSpeed: 300,
          loop: true,
          showCursor: true,
          cursorChar: "|",
          preStringTyped: function() {
              $(".main-heading").css("visibility", "visible");
          },
          onStringTyped: function() {
              $('.button-launch').addClass("animated slideInDown").css("visibility", "visible");
          }
      });
  
      $('#toggle').click(function() {
          $('#toggle').toggleClass('active');
          $('#overlay').toggleClass('open');
      });
  
      $('#overlay ul li a').click(function() {
          $('#toggle').toggleClass('active');
          $('#overlay').toggleClass('open');
      });
  
      var circleInfo = [
          //section 1
          {
              left: 12.54,
              top: 0.2,
              factor: 3.25,
              layer: '#circle-wrapper-2-1'
          }, {
              left: 0.1,
              top: 0,
              factor: 1.405,
              layer: '#circle-wrapper-3-1'
          }, {
              left: 23.14,
              top: 69.34,
              factor: 1.20,
              layer: '#circle-wrapper-3-1'
          }, {
              left: 92.78,
              top: 20.08,
              factor: 1,
              layer: '#circle-wrapper-1-1'
          }, {
              left: 75,
              top: 42.08,
              factor: 0.65,
              layer: '#circle-wrapper-3-1'
          }, {
              left: 66.28,
              top: 88.7,
              factor: 0.9,
              layer: '#circle-wrapper-1-1'
          }, {
              left: 1.38,
              top: 85.75,
              factor: 1.2,
              layer: '#circle-wrapper-1-1'
          },
          //section 2
          {
              left: 12.54,
              top: -13.8,
              factor: 3.1,
              layer: '#circle-wrapper-2-2'
          }, {
              left: 0.1,
              top: 0,
              factor: 1.405,
              layer: '#circle-wrapper-3-2'
          }, {
              left: 8.14,
              top: 58.34,
              factor: 0.75,
              layer: '#circle-wrapper-3-2'
          }, {
              left: 91.78,
              top: 0.08,
              factor: 1.1,
              layer: '#circle-wrapper-1-2'
          }, {
              left: 66,
              top: 28.08,
              factor: 0.9,
              layer: '#circle-wrapper-3-2'
          }, {
              left: 71.28,
              top: 60.7,
              factor: 2.4,
              layer: '#circle-wrapper-1-2'
          }, {
              left: -0.62,
              top: 78.75,
              factor: 1.5,
              layer: '#circle-wrapper-1-2'
          },
          //section 3
          {
              left: 44.54,
              top: -5.8,
              factor: 3.25,
              layer: '#circle-wrapper-2-3'
          }, {
              left: -1.46,
              top: 0.2,
              factor: 1.6,
              layer: '#circle-wrapper-1-3'
          }, {
              left: 18.14,
              top: 52.34,
              factor: 1.15,
              layer: '#circle-wrapper-1-3'
          }, {
              left: 84.78,
              top: 20.08,
              factor: 1.1,
              layer: '#circle-wrapper-3-3'
          }, {
              left: 75,
              top: 42.08,
              factor: 0.65,
              layer: '#circle-wrapper-3-3'
          }, {
              left: 78.28,
              top: 59.7,
              factor: 1.2,
              layer: '#circle-wrapper-3-3'
          }, {
              left: -0.62,
              top: 78.75,
              factor: 1.5,
              layer: '#circle-wrapper-1-3'
          },
          //section 4
          {
              left: 72.54,
              top: -13.8,
              factor: 3.25,
              layer: '#circle-wrapper-1-4'
          }, {
              left: -2.9,
              top: 3,
              factor: 1.575,
              layer: '#circle-wrapper-1-4'
          }, {
              left: 19.14,
              top: 50.34,
              factor: 1.35,
              layer: '#circle-wrapper-2-4'
          }, {
              left: 86.78,
              top: 59.08,
              factor: 0.95,
              layer: '#circle-wrapper-3-4'
          }, {
              left: 48,
              top: 39.08,
              factor: 0.6,
              layer: '#circle-wrapper-3-4'
          }, {
              left: 63.28,
              top: 70.7,
              factor: 1.05,
              layer: '#circle-wrapper-2-4'
          }, {
              left: -9.62,
              top: 64.75,
              factor: 1.25,
              layer: '#circle-wrapper-2-4'
          }
  
      ];
  
  
      function callMakeDiv(color, secId) {
          var flag = 0;
          var id = setInterval(function() {
              makeDiv(color, flag, secId);
              flag++;
              if (flag === 7) {
                  clearInterval(id);
              }
          }, 2000);
      }
  
      function makeDiv(color, index, secId) {
          $newdiv = $('&lt;div/&gt;').addClass('initial-div').css({
              'background-color': color,
              'width': (200 * circleInfo[index + (7 * (secId - 1))].factor) + "px",
              'height': (200 * circleInfo[index + (7 * (secId - 1))].factor) + "px"
          });
  
          $newdiv.addClass('position-div').css({
              'left': circleInfo[index + (7 * (secId - 1))].left + '%',
              'top': circleInfo[index + (7 * (secId - 1))].top + '%'
          }).appendTo(circleInfo[index + (7 * (secId - 1))].layer).addClass('animate');
      }
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.initial-div {
      transform: scale(0);
  }
  
  .position-div{
      position: absolute;
      border-radius: 50%;
      display: none;
  }
  
  @-moz-document url-prefix() {
      .section {
          overflow-x: hidden;
          overflow-y: hidden;
          width: 100%;
          height: 100vh;
      }
  }
  
  .section {
      overflow: hidden;
      width: 100vw;
      height: 100vh;
  }
  
  .container-2, .container-3 {
      position: relative;
      z-index: 50;
      top: 0 !important;
      left: 0 !important;
      width: 100vw;
      height: 100vh;
  }
  
  .animate {
      -webkit-animation: expand 20s ease-out;
      display:block;
      transform:scale(1);
  }
  
  @-webkit-keyframes expand {
      0%{
          -webkit-transform: scale(0,0);
      }
  
      100%{
          -webkit-transform: scale(1,1);
      }
  }
  
  #circle-wrapper-1-1,
  #circle-wrapper-2-1,
  #circle-wrapper-3-1,
  #circle-wrapper-1-2,
  #circle-wrapper-2-2,
  #circle-wrapper-3-2,
  #circle-wrapper-1-3,
  #circle-wrapper-2-3,
  #circle-wrapper-3-3,
  #circle-wrapper-1-4,
  #circle-wrapper-2-4,
  #circle-wrapper-3-4
  {
      position: absolute;
      width: 100vw;
      height: 100vh;
  }
  
  #circle-wrapper-1-1,
  #circle-wrapper-1-2,
  #circle-wrapper-1-3,
  #circle-wrapper-1-4
  {
      z-index: 15;
  }
  
  #circle-wrapper-2-1,
  #circle-wrapper-2-2,
  #circle-wrapper-2-3,
  #circle-wrapper-2-4{
      z-index: 10;
  }
  
  #circle-wrapper-3-1,
  #circle-wrapper-3-2,
  #circle-wrapper-3-3,
  #circle-wrapper-3-4{
      z-index: 5;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/parallax-js@3.0.0/dist/parallax.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/fullpage.js@2.9.4/dist/jquery.fullpage.min.js"&gt;&lt;/script&gt;
  &lt;div class="section" id="section2"&gt;
      &lt;div class="layer container-2" data-depth="0.8"&gt;
          &lt;h1&gt;I'm Prateek&lt;/h1&gt;
          &lt;h3&gt;Android Developer &lt;br&gt; &amp; Design Consultant&lt;/h3&gt;
          &lt;p&gt;I have been working on Android since the past
          &lt;br&gt; 3 years. I am a tech enthusiast and I like solving&lt;br&gt; problems which affect people’s lives, using
          &lt;br&gt;my skills. In my free time I blog about my,&lt;br&gt; learnings or design beautiful things.&lt;br&gt;Scroll along to check out my work. &lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="layer" id="circle-wrapper-1-2" data-depth="0.6"&gt;&lt;/div&gt;
      &lt;div class="layer" id="circle-wrapper-2-2" data-depth="0.5"&gt;&lt;/div&gt;
      &lt;div class="layer" id="circle-wrapper-3-2" data-depth="0.4"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>