javascript - GlideJS の最初のスライドが点滅しています

Question

一定の周期でスライダーのスライドを変更すると、最初のスライドから最後のスライドに変更するときに最初のスライドが点滅します。

このバグは Chrome でのみ発生します。ブラウザー ウィンドウを最小化してから最大化すると、バグがより頻繁に表示されることに気付きました (ただし、これは確実ではありません :))。

https://github.com/glidejs/glide/issues/300の解決策は役に立ちません!

小さなデモをまとめました: https://codepen.io/depressingutopian/pen/jOwvpGQ?editors=1111

const initCarousel = () => {
    const slides = document.querySelectorAll('.glide__slide');
    if (slides.length) {
        const sliderConfiguration = {
            gap: 0,
            type: 'carousel',
            autoplay: '1000',
            animationDuration: '500',
            hoverpause: false,
            keyboard: true,
            animationTimingFunc: 'cubic-bezier(0.165, 0.840, 0.440, 1.000)',
            swipeThreshold: 0,
            dragThreshold: false
        };
        const slider = new Glide('.map-banner', sliderConfiguration);
        slider.mount();
    }
}

initCarousel();

.section-default {
  height: 100%;
  width: 100%;
  background-color: #f5f5f5;
  padding: 0;
  margin: 0;
  font-family: 'FiraSans';
  font-family: 'Fira Sans', sans-serif;
  font-weight: 400;
  min-width: 320px;
  -webkit-overflow-scrolling:  touch;
  -webkit-text-size-adjust: none;
}

.layout {
    height: 100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.layout__content {
   -webkit-flex: 1 0 auto;
    flex: 1 0 auto;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mb-p, .mb-sm {
    margin-bottom: 1.5rem;
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    margin-bottom: 0px;
}

.color-common {
    color: #424242;
}
body, html {
    font-family: 'FiraSans';
    font-family: 'Fira Sans', sans-serif;
    font-weight: 400;
    -webkit-text-size-adjust: none;
}

html {
    font-size: 16px;
}

ul {
    list-style-type: none;
    font-size: inherit;
    color: inherit;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.map-banner {
    margin: 1.5rem auto 0;
    width: 79rem;
    cursor: default;
}

.glide--swipeable {
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}
.glide {
    position: relative;
    box-sizing: border-box;
}

.map-banner .glide__slide_narrow {
        padding: 0 1.5rem;
    }

 .map-banner .glide__arrow {
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

 .map-banner .glide__arrow_prev {
        left: -5px;
        transform: translateY(-50%) rotate(90deg);
  }

  .map-banner .glide__arrow_next {
        right: -5px;
        transform: translateY(-50%) rotate(270deg);
   }

   .map-banner .glide__arrow-img {
        width: 2rem;
        height: 2rem;
   }

.map-banner .map-banner__transfer {
    img {
        height: 12rem;
    }
}

.slider {
    img {
        width: 100%;
    }
}

.map-banner__main {
    display: flex;
    width: 100%;
    height: 24rem;
    background-repeat: no-repeat;
    background-size: cover;
}

.glide__track {
  
  margin-left: 12px;
  margin-right: 12px;
}

.map-banner__main_0 {
    background-image: url('https://i.imgur.com/gleemJV.png');
}

.map-banner__main_1 {
    background-image: url('https://i.imgur.com/oF41CCc.png');
}

.map-banner__main_2 {
    background-image: url('https://i.imgur.com/oEVQL4F.png');
}

// Flickering bug fix (Attempt)
.glide__slide--active {
    z-index: 1;
}

<link rel="stylesheet" href="https://unpkg.com/@glidejs/glide@3.3.0/dist/css/glide.core.min.css">
<script src="https://cdn.jsdelivr.net/npm/@glidejs/glide" type="text/javascript"></script>

<div class="section-default platform_unknown">
  <div class="layout layout_full_height color-common">
    <div class="layout__content">
      <section class="mb-sm mb-mob-none">
         <div class="glide map-banner">
            <div class="glide__track" data-glide-el="track">
               <ul class="glide__slides">
                  <li class="glide__slide slider">
                    <img class ="map-banner__main" src="https://i.imgur.com/gleemJV.png"/>
                  </li>
                  <li class="glide__slide slider">
                     <img class ="map-banner__main" src="https://i.imgur.com/oF41CCc.png"/>
                  </li>
                  <li class="glide__slide slider">
                     <img class ="map-banner__main" src="https://i.imgur.com/oEVQL4F.png"/>
                  </li>
               </ul>
            </div>
         </div>
      </section>
    </div>
  </div>
</div>

このバグの修正を手伝ってくれるすべての人に感謝します。