title: 'Flickity' Carousel Firefox Issue
body: <p>I'm building a new eCommerce website and wish to use 'Flickity' carousel with custom jQuery &amp; CSS code to give it a progress bar. It works great in Chrome, Opera, Edge etc., but not in Firefox as the carousel is missing although the progress bar still shows. However, resizing the window will then make it appear.</p>
  
  <p>you can see the site here: <a href="http://bp177.betapark.co.uk/" rel="nofollow noreferrer">http://bp177.betapark.co.uk/</a></p>
  
  <p>I've tried min-height etc., as well as jQuery window load, but I just can't get anything to work.</p>
  
  <p>Any suggestions would be much appreciated as I've spent hours so far trying to fix this.</p>
  
  <pre><code>.carousel-cell {
  width: 100%;
  }
  
  html {
  overflow-y: scroll;
  }
  
  &lt;div class="main-carousel" data-flickity=''&gt;
      &lt;div class="carousel-cell"&gt;&lt;img src="/user/templates/flat-blue/slideshow-1.jpg"&gt;&lt;/div&gt;
      &lt;div class="carousel-cell"&gt;&lt;img src="/user/templates/flat-blue/slideshow-2.jpg"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="carousel-progress"&gt;
      &lt;div class="progress"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;script type="text/javascript"&gt;
  
  var duration = 3;
  var interval = 5;
  var slider = document.querySelector(".main-carousel");
  var sliderWrapper = document.querySelector(".main-carousel");
  var progressBar = document.querySelector(".progress");
  
  var flkty = new Flickity(slider, {
      cellSelector: ".carousel-cell",
      cellAlign: "center",
      contain: true,
      draggable: true,
      wrapAround: true,
      prevNextButtons: true,
      fullscreen: true,
      groupCells: true
  });
  
  
  // Main Progress Bar Function
  
  var percentTime, step, tick;
  
  function startProgressbar() {
      resetProgressbar();
      percentTime = 0;
      isPaused = false;
      tick = window.setInterval(increase, interval);
  }
  
  function increase() {
      if (!isPaused) {
          step = duration * 1000 / interval;
          percentTime += 100 / step;
          progressBar.style.width = percentTime + "%";
          if (percentTime &gt;= 100) {
              flkty.next();
              startProgressbar();
          }
      }
  }
  
  function resetProgressbar() {
      progressBar.style.width = 0 + "%";
      clearTimeout(tick);
  }
  
  startProgressbar();
  
  // Pause Control
  
  var isPaused = false;
  
  sliderWrapper.addEventListener("mouseenter", function() {
      isPaused = true;
  });
  
  sliderWrapper.addEventListener("mouseleave", function() {
      isPaused = false;
  });
  
  // Pause Progress Bar when it's Hovered Over
  
  $(".carousel-progress").mouseenter(function() {
      isPaused = true;
  });
  
  $(".carousel-progress").mouseleave(function() {
      isPaused = false;
  });
  
  // Resets Progress Bar on Drag
  
  flkty.on("dragMove", function(progress) {
      startProgressbar();
      isPaused = true; //(Disable/delete line if pause on hover is not in use)
  });
  
  // Resets Progress Bar on Click of Previous/Next Buttons and Page Dots
  
  $(".previous, .next, .flickity-page-dots").click(function() {
      startProgressbar();
      isPaused = true; //(Disable/delete line if pause on hover is not in use)
  });
  
  // Controls Visibility of Previous/Next Buttons on Carousel Hover
  
  $(document).ready(function() {
      $(".flickity-viewport, .flickity-prev-next-button, .flickity-page-dots, .carousel-progress").mouseover(function() {
          $(".flickity-prev-next-button").css({
              "visibility": "visible",
              "opacity": "1"
          });
      });
  
      $(".flickity-viewport, .flickity-prev-next-button, .flickity-page-dots, .carousel-progress").mouseout(function() {
          $(".flickity-prev-next-button").css({
              "visibility": "hidden",
              "opacity": "0"
          });
      });
  });
  &lt;/script&gt;
  </code></pre>