[Bug]: Flickering when adding icon or image in slides (8.0) about embla-carousel HOT 3 CLOSED

Hello @davidjerleke,

Thanks a lot for the quick feedback and sorry again for being lazy with the sandbox. n_n.

You were right as your first guess did the trick:

.icon {
  backface-visibility: hidden;
}

I'm closing the topic ; thanks again for your help. :)

Have a great day!
Cheers,
Charlie

from embla-carousel.

Hi @Nincha,

I can’t debug anything with fragments of code. A CodeSandbox is mandatory if you want me to look into it.

However, my guess would be that this is a rendering problem in the browser and sometimes, they can be solved by promoting the flickering element to a separate layer. So you can try adding the following CSS to your icons, slides or slide container (try all separately, not all at the same time):

.icon {
  backface-visibility: hidden;
}

/* If that doesn’t work, try this instead: */

.icon {
  transform: translateZ(0);
}

Best,
David

from embla-carousel.

@Nincha I’m glad to hear that.

Cheers,
David

from embla-carousel.