The first slide in GlideJS is flashing

Question

When changing slides in the slider with some periodicity, the first slide flashes when changing from the first to the last slide.

The bug only appears in Chrome. I noticed that if you minimize the browser window and then maximize, then the bug appears more often ( but this is not certain :) ).

The solution from https://github.com/glidejs/glide/issues/300 doesn't help!

I put together a small demo: 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>

I would be grateful to everyone who can help fix this bug.

Answer 1

The solution is to add z-index:1 in the active slide.

.glide__slide--active{z-index: 1;}