Spinning Loader in Carousels MaterializeCSS

Question

My problem can be shown here: https://codepen.io/AliF50/pen/OzwKdm

<div class="container">
  <div class="row">
      <div class="col s6">
          <div class="carousel carousel-slider">
              <a class="carousel-item" href="#one!"><div class="preloader-wrapper big active">
                  <div class="spinner-layer spinner-blue-only">
                    <div class="circle-clipper left">
                      <div class="circle"></div>
                    </div><div class="gap-patch">
                      <div class="circle"></div>
                    </div><div class="circle-clipper right">
                      <div class="circle"></div>
                    </div>
                  </div>
                </div>Slide 1</a>
              <a class="carousel-item" href="#two!"><div class="preloader-wrapper big active">
                  <div class="spinner-layer spinner-blue-only">
                    <div class="circle-clipper left">
                      <div class="circle"></div>
                    </div><div class="gap-patch">
                      <div class="circle"></div>
                    </div><div class="circle-clipper right">
                      <div class="circle"></div>
                    </div>
                  </div>
                </div>Slide 2</a>
          </div>
      </div>
      <div class="col s6">
          <div class="carousel carousel-slider">
              <a class="carousel-item" href="#one!"><div class="preloader-wrapper big active">
                  <div class="spinner-layer spinner-blue-only">
                    <div class="circle-clipper left">
                      <div class="circle"></div>
                    </div><div class="gap-patch">
                      <div class="circle"></div>
                    </div><div class="circle-clipper right">
                      <div class="circle"></div>
                    </div>
                  </div>
                </div>Slide 1</a>
              <a class="carousel-item" href="#two!"><div class="preloader-wrapper big active">
                  <div class="spinner-layer spinner-blue-only">
                    <div class="circle-clipper left">
                      <div class="circle"></div>
                    </div><div class="gap-patch">
                      <div class="circle"></div>
                    </div><div class="circle-clipper right">
                      <div class="circle"></div>
                    </div>
                  </div>
                </div>Slide 2</a>
          </div>
      </div>
  </div>
</div>

In Google Chrome, it works perfectly. In Internet Explorer, the hidden carousel slide's loading spinner still shows on the screen. What is weird is switching to a new tab in Internet Explorer and then back into this tab, the extra spinners disappear. The text of Slide 1 and Slide 2 disappear though, it is the spinner that does not disappear.

Any ideas on what could be causing this issue in Internet Explorer?

Answer 1

I fixed it by adding the following CSS.

.carousel-item:not(.active){
   visibility: hidden;
}

https://codepen.io/AliF50/pen/OzwKdm