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