Flashing Background Image on Transition

Applying the basic glide setup with slides that contain a background image causes a flicker when transitioning.

 <div class="glide" id="glide-header">
        <div class="glide__track" data-glide-el="track">
            <ul class="glide__slides">
                <li class="glide__slide FOO">A</li>
                <li class="glide__slide FOO">B</li>
            </ul>
        </div>
</div>

(Not sure if the background image is necessary, but relevant to my repro)

/* import core css for glide */

.FOO {
    background-image: url('../img/foo.png');
}

const Carousel = new Glide('#glide-header',
    Object.assign({}, glideConfig, {
      perView: 1,
      gap: 0,
      autoplay: 5000,
      hoverpause: false,
  }));

Carousel.mount();

If you let the slides play through, you’ll notice a flicker on Chrome (minimally).

I was able to fix this issue by overriding glide__slides as seen below. Any idea what might be happening here?

.glide__slide {
    /* Fix for flashing background image on slide */
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

[cizza]

Hello,

I’ve noticed flickering of the image in Chrome with a normal images. Your fix didn’t help me, however my solution was quite a simple. I’ve added a z-index to the glide__slide–active class. z-index: 1 did the trick. I’ve noticed an issue when the active class gets applied to the slide index 0 after playing the whole sequence and my first guess was z-index. Hope that helps to someone.

[alexbarbato]

Kudos for trying and thanks for the effort @lifeinchords!