Flashing Background Image on Transition

[alexbarbato]

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.

[lifeinchords]

I had the same problem, then found this GH issue. transform: translate3d(0, 0, 0); didnt work for me either. @cizza suggestion fixed it for me.

Here's a Codepen if it helps anyone: https://codepen.io/lifeinchords/pen/joBwWP

You can try removing the last class .glide__slide--active to see the issue.

[lifeinchords]

Damn, just when you thought it was safe to go in the water... the bug is back. It's intermittent and I can't seem to find the reason when/why it shows up sometimes and not others.

If anyone can figure this out...

[alexbarbato]

Kudos for trying and thanks for the effort @lifeinchords!

[lifeinchords]

Thanks @alexbarbato Yeah it's a bummer - the library is so good otherwise. But client is saying it's a must fix, and I might not have a choice but switch to another lib :(

I'd try to fix but I have no idea where to start.

[lifeinchords]

Using type: 'slider' for now

[svmszcck]

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.

This solved the issue. Thanks a lot. Really appreciated...

[mirzoyev]

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.

Google results mostly suggesed backface-visibility and transform: translate3d(0, 0, 0), but they didn't work. Your z-index solution solved the problem. Thank you!