Slick: Slide blinks at the end of infinite-rotation-transition (🐈)

[noBlubb]

The transition from the last slide to the first slide (and inverse) sometimes causes an image within a slide to blink for a moment. I created a jsfiddle with minimal configuration to show this issue:
http://jsfiddle.net/f0up44wt/2/ (4-slides version)

Try to slide between Slide 1 and Slide 4 (to the left). At the end of the transition the image will eventually blink.
I spent the last 30 minutes sliding cats around and every time i think the bug is gone i see a flickering...check out the fun fact below...

On Chrome 46.0.2490.86 (64-bit) (Mac OS X 10.11.1) it happens:

• never, when moving "within the normal order" [1, 2, 3, 4], 1->2, 2->1, 2->3, 3->2...
• sometimes, but only when the previous transition is finished and only when moving between the last and the first slide in infinite scroll mode [1, 2, 3, 4], 4->1 (moving right), 1->4 (moving left)

My guess it's because of the changing transition offset in the root (-slick-) element, but DOM break points didn't really help me to figure it out.

_Fun fact_ increasing the number of cats in the fiddle actually seems to resolve this problem:
http://jsfiddle.net/f0up44wt/3/ (10-slides version)

Please +1 if you can reproduce this issue, i'm going crazy :cat2:

[ahmadalfy]

+1 I can reproduce it. Someone here possted a fix earlier using CSS. Will try to get it

[noBlubb]

1845 references #1626, but there is no animation for * in my fiddle.

Turns out it runs great on Safari so I'll focus on issues with Chrome.
I came up with http://stackoverflow.com/questions/3461441/prevent-flicker-on-webkit-transition-of-webkit-transform and will try to adapt this solution.

[noBlubb]

The given indication was right, see this fiddle:
http://jsfiddle.net/f0up44wt/4/
The new backface-visibility-property could cause performance issues so handle with care.
https://css-tricks.com/almanac/properties/b/backface-visibility/

1874 could be related, too.

[noBlubb]

Small update:
The new rule actually fixed the flickering but eventually caused the last slide to disappear from time to time. I made a new fiddle following http://stackoverflow.com/questions/13952480/why-does-applying-webkit-backface-visibility-hidden-fix-issues-with-negativ and this works quite nice for me: http://jsfiddle.net/f0up44wt/5/

So all I needed to fix this was
.slick-slide { -webkit-transform: translate3d(0,0,0); }

[ahmadalfy]

Thank you for your extended research. Can you try and see if will-change will fix it?

[noBlubb]

Sorry, I'm relatively new to Github. I tried to find a branch or label called will-change but no luck on this one? Fixing the declaration in slick.css:43 however should fix this:

.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);
}

[yangkennyk]

@noBlubb the first slide is still flickering on your last fiddle for me http://jsfiddle.net/f0up44wt/5/

what are you changing on line 43? It looks the same as what I have.

I'm still having the issue here: https://github.com/kenwheeler/slick/issues/1961

[ninjaonsafari]

@noBlubb i still experience the issue with your fix.

[noBlubb]

@ninjaonsafari Can you tell more about your env?

[ninjaonsafari]

@noBlubb

Windows: 8.1 Pro 64bit
Chrome: 47.0.2526.106 m
Slick: 1.5.8

Live Version

[kkush]

The issue persists in a (2 - slide version), any updates on the issue??

[ninjaonsafari]

@noBlubb could you reopen this issue?

[noBlubb]

Done, as this bug still remains.

[simeydotme]

We'll try to get to the bottom of this, however there should be no cloned-slides in version 2.0, or at least a different way of handling them... so the bug may vanish as a result.

Thanks for all the effort you've put in to the investigation, @noBlubb :smile: :bow:

[zlatoroh]

1+

[alexemorris]

This was happening to me. The reason was because I was referencing slides by ID for styles (background image etc) and the browser wasn't applying them until after the duplicate slide was removed (when animation completes)

Referencing slides by class solved the issue for me.

[asadkn]

2230 definitely fixes this. #1961 and #2243 are also fixed by the #2230

That should definitely be merged to core.

[davidrhoderick]

2230 does not fix this. I am on Mac OS X Sierra and Chrome and with infinite looping turned on, I get a white flash after the last slide for the first slide entering. I tried to manually add the #2230 fix and it didn't do anything.

[dougkeeling]

+1

I am also running Sierra and Chrome and encountering the same issue, which as @davidrhoderick mentioned, is not fixed by #2230.

[omzy]

+1

Any update on this?

[Tardis1234]

+1

[ryanlloydfrench]

I am experiencing this issue as well.

[denisbouquet]

+1

[frontgirl]

+1

[zckpp]

+1

[ghost]

+1

[tondi]

+1

[webkitvn]

+1

[RyanCameronMe]

Any updates on this?

[ryan-ajmadison]

+1

[sifex]

+1

[umer4ik]

+1

[kieryk123]

I have this problem too

[elicym]

+1

[noBlubb]

Please stop commenting +1, as it does not add anything useful to this issue.
If at all, append information about your environment (i.e. browser; slick version; jquery version).

[CloudDesignBox]

I was getting the same issue. I was using:

https://code.jquery.com/jquery-2.1.1.min.js
https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js

However, changing to slick 1.8 seemed to fix the issue:
https://code.jquery.com/jquery-2.1.1.min.js
https://cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick.min.js

[kschiffer]

Changing to 1.8 did not solve the issue for me. This should be addressed, as it makes this otherwise great library unusable for me. :(

Experiencing this on Chrome, MacOS, jQuery 3.2.1, Slick 1.8.1. Flicker does not occur always, but about 60% of the time and especially when using the navigation quickly.

[Alex-Hay]

+1

[mentaman]

Hey, I had the same problem.
After reading the comments on this post and after reading this article:
http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css
I've came with a solution that worked for me,
hope it'll work for others too.

.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;
}

That's the fixed jsfiddle of yours:
http://jsfiddle.net/f0up44wt/49/

Please update me wheter it works for you or not..

[rabbitwish]

@mentaman it works for me! the thing is if my last slide is the video slide (embed youtube) the slider will not flicker. But if it's only plain slide (text and image) the flickering issue will happen... what a magic! Many thanks for the fix!

[kieryk123]

@mentaman It works! Thanks ;)

[kjschulz]

@mentaman, it did not work for me. I'm just using text in my slides and am running Sierra and Firefox.

I have tried the following:

• Update to latest slick version (1.8.1)
• Add CSS fix mentioned with hardware accelerated transitions

[barnonahill]

The solution @alexemorris had worked for me. Make sure you're not referencing slick-items by id in your stylesheets.

[Cartmaniac]

I applied the CSS fix and it fixed the forward scrolling. If I go backwards, there is still flickering.

[majakoru]

I also applied every CSS fix and it is not working. Even I increased slides from 5 to 9 and again on image there is very visible flashing after infinite loop.

[Cartmaniac]

I did fix it by setting the right number for slidesToScroll. For 8 slides I had to set it to 4.

[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.

[hchris28]

I was having this issue in Chrome on Windows and the latest version of Slick, and none of the css solutions worked for me. I was able to work around it by using useTransform: false option. Perhaps this will prove useful in finding a solution.

[DaemonHK]

Bug execute again in new version of Chrome (64) and Slick 1.6.0/1.8.1. In FF 58 all is OK.

[antonreshetov]

+1
Same issue on opacity

[Jakob-Maudience]

If the 3d transform "hacks" don't seem to fix the issue, you could try will-change css property on slides (only supported on Firefox and Chrome for now)

.slick-slide { will-change: transform; }

This fixed the blinking issues on chrome that I was experiencing and is much cleaner than the above solutions.

[poebrand]

Thanks @Jakob-Maudience, that was a simple solution and worked for me as well in Chrome on desktop and Android.

[davorpeic]

Issue is still visible (chrome, osx) tried will-change and resetting transforms with no luck

[jeffersonRibeiro]

@hchris28 useTransform: false solution worked for me, Thanks Chris!

[fatmarker]

Warning: @mentaman's solution makes slides low-res in macOS Safari and all iOS browsers.

[dmitry-christie]

Lol, the bug was reported in 2015 and I'm having an issue with it today in July 2018. Lovely. :D

[emovere]

My investigation on 15" Macbook Pro Retina (Safari 11.1.1 on High Sierra 10.13.5):

useTransform: false
Seems to prevent the flickering, but the animation becomes sluggish.
(Because it isnt hardware accellerated?)

The Commit
https://github.com/damianwajer/slick/commit/d2187b6bf6e202a9816365223bf80efd678b1e5b
Doesnt fix it for me and on top blurs the content on my Macbook Retina Screen.

Working Solution:
Add Backface Visibility to:

.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-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}

Note: Iam using Slick together with LazySizes (For SEO friendly lazyloading, https://github.com/aFarkas/lazysizes)

[bondardevelop]

Somebody can find the problem with this issue https://github.com/kenwheeler/slick/issues/3508

[amyandrews610]

useTransform: false worked for me. I was having this issue in Windows 8.1 IE 11. Thanks!

[SahilMepani]

I have found the perfect and easy fix:
Just add :

.slick-cloned {
   -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);
}

[Coufu]

All the CSS suggestions don't work for me. useTransform: false works but makes the animation choppy (because of lack of hardware-acceleration). Not the best, but going to use useTransform: false for now.

[raffaellara]

useTransform: false

This solution worked for me!

[Rusin-Tomasz]

For me works:
Add on the end "transition-delay: 10ms;" like below.
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);
transition-delay: 10ms;
}

[eemeeli]

Bug still there, removed transitions from * only helped for me.

Remove:

* { 
 transition 
} 

[fmrz1996]

@Rusin-Tomasz this works for me, thanks dude!

[User195]

problem still there

[vishvendrasingh]

None of above worked in my case. But I checked that the previous of first and next of last element has their id missing so got this working for 3 slides this way -

        $("[data-slick-index=-1]").find('.success_stories_img').attr('id', 'success_stories_img_3'); //when first time loads for previous slide
    $('.main-class').on('beforeChange', function(event, slick, currentSlide, nextSlide){
        if(nextSlide==0){
            $("[data-slick-index=-1]").find('.class_img').attr('id', 'class_img_3');
        }
        if(nextSlide==2){
            $("[data-slick-index=3]").find('.class_img').attr('id', 'class_img');
        }
    }); 

[kippo]

@Jakob-Maudience Thanks works for me

[yokomele]

I've been having the same problem on carousel,
In my case, it works by adding below to my style sheet.

.slick-slider div { transition: none; }

[damagefilter]

I had that issue as well with the centerMode infinite-rotation.

Problem appears to be that slick would apply transitions and animations on the "wrong" elements (the clones, most probably).
postSlide the setPosition function would override the transition data with the "wrapped" data (the not-clone elements) which did not get the slide classes in time set by setSlideClasses... I'm making this confusing now.
Lets get to the meat of it.

Digged through the code. Found the setSlideClasses function.
https://github.com/kenwheeler/slick/blob/7daf56cb83e1365e7b7b0ef551f4a6b6b82a0f78/slick/slick.js#L2316

Starting from this here line ...
https://github.com/kenwheeler/slick/blob/7daf56cb83e1365e7b7b0ef551f4a6b6b82a0f78/slick/slick.js#L2354
It deals with wrapping around the carousel in an infinite loop.
Curiously enough, it will only do that for the .slick-center class. Not the surrounding .slick-active classes left and right.
In my particular case, that caused the plopping to happen as it would not apply the classes to the "wrapping point elements", so to speak.

Solution is to figure out the left and right elements and outfit them with the correct classes.
Below this line:
https://github.com/kenwheeler/slick/blob/7daf56cb83e1365e7b7b0ef551f4a6b6b82a0f78/slick/slick.js#L2358
Add this code:

allSlides
    .eq( _.options.slidesToShow + _.slideCount + 2 )
    .addClass('slick-active');
allSlides
    .eq( _.options.slidesToShow + _.slideCount)
    .addClass('slick-active');

And below this line (it's a different one than before, watch out! :) ):
https://github.com/kenwheeler/slick/blob/7daf56cb83e1365e7b7b0ef551f4a6b6b82a0f78/slick/slick.js#L2364
Add this code:

allSlides
    .eq(_.options.slidesToShow - 1)
    .addClass('slick-active');
allSlides
    .eq(_.options.slidesToShow + 1)
    .addClass('slick-active');

And that'll deal with wrapping classes.

On top of that add the transition instruction to the .slick-slide class, for example like so:

.slick-slide {
    transition: all 450ms ease;
}

I realise that's a pretty specific thing and will, as other solutions posted in the last couple years, not be the catch-all solution to the problem but perhaps it helps for some people.

[dmitry-christie]

Alternatively, one can switch to Swiper.js @damagefilter . I did and I will recommend doing the same.