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

[wiedikerli]

@noBlubb i still experience the issue with your fix.

[noBlubb]

@ninjaonsafari Can you tell more about your env?

[wiedikerli]

@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??

[wiedikerli]

@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

[ecymerman]

+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/slick@1.8.1/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