Slick: Slide flickers when going from last to first slide

[yangkennyk]

Have been researching possible fixes for this and just cannot figure out what's wrong.

The issue seems to only be in chrome. But it doesn't happen in Chrome Canary.

http://jsfiddle.net/de2yzzds/6/ (use arrow keys to navigate and I also need the html this way)

The slide flickers when it goes from the last slide to the first slide

I'm on a mac using Chrome Version 47.0.2526.80 (64-bit)

Saw this solution https://github.com/kenwheeler/slick/issues/1890 but it doesn't seem to work.

Can anyone else recreate the issue?

[ninjaonsafari]

@yangkennyk have you investigated on this issue?

[ninjaonsafari]

If you go in the different direction it happens on the last slide and on the other side from the slide.

[yangkennyk]

@ninjaonsafari yep. it seems to happen when it goes from first to last/last to first.

I haven't found a solution yet.

[yikman]

@yangkennyk, I had a similar issue and i got mine fixed

.slick-track,
.slick-list {
-webkit-perspective: 2000;
-webkit-backface-visibility: hidden;
}

[simeydotme]

@yikman ! great comment, can @yangkennyk try and confirm if it works? -- if so, I've love to merge a PR for this in the slick css file, @yikman -- if you're up for it?

[yikman]

@yangkennyk, just awaiting for confirmation whether code above fixes your issue.

My bug was: Latest version Chrome - Mac/Windows. First to last / last to first slide, flicker white background appearing.

@simeydotme, yeah that will be cool, once @yangkennyk confirms this is a fix for him.

[polarbirke]

Quick heads-up: I had the same issue and @yikman's fix worked for me.

[yikman]

@polarbirke, only down side for using (-webkit-perspective: 2000;), all IOS devices - it will become blur.

[damianwajer]

-webkit-perspective: 2000px fixes this issue (note the unit which is required according to docs: MDN, W3C).

[ghost]

@yikman your solution fixed it for me too.

[DoubleMarv]

@yikman worked for me too - thanks

[eugeneAamplify]

Im still having this problem. Especially when I have SVGs in the container that are animated. Just shows black SVGs!

[Yonn-Trimoreau]

@yikman Your solution works, thank you.
But fix is currently not available/not working in latest Slick release..

[wpcoderca]

I'm also experiencing the same issue. I've tried multiple fixes but nothing seems to solve it.

[puigandrew1]

Also not working for me.

[amearini]

None of the above solutions worked for me. However I noticed one thing. I'm working with a MacBook retina with a standard HD second screen. The flickering seems to happen only with Chrome on the retina screen but not on the other one. Latest versions of Safari/Firefox/Opera for mac are not presenting the issue. I'm no expert and can't figure a solution. But maybe this might help in finding a solution.

[Danoweb]

Hello, I'm working on a project which runs on a google Chromecast (Chrome Browser). When looping back to the first slide in autoplay, I am seeing this flicker issue as well, even after applying the mentioned hack above by @yikman . Is there a planned fix for this in Chrome browsers? Thank You!

[Danoweb]

Just a quick update I found from another issue #1890 --- the use of slick option: useTransform: false will prevent this flickering effect on Google Chrome (and Chromecast).

[nikotomad]

@Danoweb 's fix worked for me! Mad props to you buddy.

[yayMark]

I found this to work for my case. Same fix as someone else, different class.

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

[amichel86]

Thanks @yayMark for your solution.

Will this be fixed eventually or it's a Chrome bug?

[AdamColton8]

it helped me

.slick-slide,
.slick-slider .slick-track,
.slick-slider .slick-list
{
  -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);

  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}

[pablogiralt]

Thanks @yayMark. Your solution fixed it for me:

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

[sirgru]

I have tried the solutions from this page and only Danoweb's fix worked for me. However, it makes the sliding slower. .slick-slide { -webkit-backface-visibility: hidden; } fix makes the flicker full width on my end, which makes it subjectively worse.

[css3coder]

Just a quick update I found from another issue #1890 --- the use of slick option: useTransform: false will prevent this flickering effect on Google Chrome (and Chromecast).

Thanks @Danoweb for your solution. Only it defeated this bug.
I also recommend adding option: easing: 'swing', to return smoothness.

[majidzeno]

useTransform: false

Fixed the issue for me .. Thanks @Danoweb