Slick slider. Why do artifacts appear when slide from last to first and from first to last?

Issue

Why do artifacts appear when slide from last to first and from first to last? I tried with Swiper slider, but it was the same. Is it because of large images or what? If you deactivate infinity, everything will be okay, but I need infinity.

Here is the JS-code:

var simpleSliderInner = $(".simple-slider__inner");

simpleSliderInner.slick({
  prevArrow: "<button class=\"simple-slider__arrow simple-slider__arrow_prev\">" +
  "<svg class=\"icon icon_sprite_arrow_slider\">" +
  "<use xmlns:xlink=\"http://www.w3.org/1999/xlink\" xlink:href=\"#sprite_arrow_slider\"></use>" +
  "</svg>" +
  "</button>",
  nextArrow: "<button class=\"simple-slider__arrow simple-slider__arrow_next\">" +
  "<svg class=\"icon icon_sprite_arrow_slider\">" +
  "<use xmlns:xlink=\"http://www.w3.org/1999/xlink\" xlink:href=\"#sprite_arrow_slider\"></use>" +
  "</svg>" +
  "</button>",
  dots: true,
  dotsClass: "simple-slider__dots",
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        arrows: false
      }
    }
  ]
});

Here is codepen.

Here is website

Solution

Ok, I'm going to assume you were referring to the flicker of the image when switching from the first slide to the last slide.

The reason for this is because of a flicker that exists for CSS animations on webkit (source 1, source 2). That explains why the issue was still visible even after you switched to a different slider plugin.

I created an updated version of your codepen to work with the solution suggested in the sources I have mentioned above.

I was able to resolve the issue by setting -webkit-backface-visibility: hidden to the slick-slide class.

.slick-slide {
    -webkit-backface-visibility: hidden;
}

I hope I interpreted your question correctly. Cheers!

Update

Seems like this is a problem with the transitions of slick that's been around for quite a while and currently does not have a fix that works for everyone

Answered By - Awad Maharoof