Carousels MaterializeCSS中的旋轉加載程序

Question

我的問題可以在這里顯示： 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>

在Google Chrome瀏覽器中，它可以完美運行。 在Internet Explorer中，隱藏的輪播幻燈片的加載微調器仍顯示在屏幕上。 奇怪的是，切換到Internet Explorer中的新選項卡，然后又回到該選項卡，多余的微調器消失了。 雖然幻燈片1和幻燈片2的文本消失了，但微調器並沒有消失。

關於在Internet Explorer中可能引起此問題的任何想法？

Answer 1

我通過添加以下CSS對其進行了修復。

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

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