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

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:

Nov 13 '15 21:11 noBlubb

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

Nov 15 '15 18:11 ahmadalfy

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

Nov 16 '15 10:11 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.

Nov 16 '15 11:11 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); }

Nov 16 '15 11:11 noBlubb

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

Nov 16 '15 12:11 ahmadalfy

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

Nov 16 '15 14:11 noBlubb

@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

Dec 10 '15 23:12 yangkennyk

@noBlubb i still experience the issue with your fix.

Dec 17 '15 09:12 wiedikerli

@ninjaonsafari Can you tell more about your env?

Dec 26 '15 22:12 noBlubb

@noBlubb

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

Live Version

Jan 04 '16 08:01 wiedikerli

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

Jan 14 '16 09:01 kkush

@noBlubb could you reopen this issue?

Jan 14 '16 10:01 wiedikerli

Done, as this bug still remains.

Jan 20 '16 23:01 noBlubb

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:

Jan 21 '16 04:01 simeydotme

1+

Jun 09 '16 07:06 zlatoroh

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.

Aug 29 '16 17:08 alexemorris

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

That should definitely be merged to core.

Sep 07 '16 21:09 asadkn

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