Flicker on animation

[AHB]

http://webrafter.com/opensource/react-slick

The Multiple Items slider end slide flickers when animating the rollover from the 3rd item, back to the first.

Will also flicker when going from the 1st item, back to the 3rd. Seems to happen on all sliders with infinite enabled and slidesToScroll > 1.

[akiran]

On which browser and os you are seeing this issue ?

I don't see this issue in mac and chrome

[AHB]

I'm also on Mac, Chrome 48.

[mpaulucci]

I have the same problem. I dont see the flickering in Mac but I see it on my Android Phone. If you look carefully you will see a delay in the updating of the active dot, that can be reproduced in Mac as well.

I think the issue may be related to setting a wrong value of currentSlide.

I have a working example with 3 Slides, infinite turned on. If I log currentSlide in the render method of Dots, when sliding from slide 2 (the last one) to slide 3 (should go to slide 0), I get this:

Example with 3 slides, sliding one time:

2016-03-02 12:38:41.360 dots.js:34 [Dots] Current slide: 2
2016-03-02 12:38:41.466 dots.js:34 [Dots] Current slide: 3 // Bug!
2016-03-02 12:38:41.987 dots.js:34 [Dots] Current slide: 0

currentSlide is incorrectly set to 3 temporary (half a second) before being correctly set to 0.

The setState with the error is this one: https://github.com/akiran/react-slick/blob/9bbe0fa9191bb5b1156cec4755532ee108f14cbc/src/mixins/helpers.js#L223 (sets currentSlide to 3)

And this one corrects it: https://github.com/akiran/react-slick/blob/9bbe0fa9191bb5b1156cec4755532ee108f14cbc/src/mixins/helpers.js#L214 (sets currentSlide to 0)

The difference between the two setState is that the first one sets it to targetSlide and the second one to currentSlide. Changing the first one to currentlSlide fixes the issue, but I'm not sure about the implications of this change.

[Update]: I've tested the change on mobile, it fixes the dots delay issue, but not the flicker

[akiran]

@AHB @mpaulucci Release 0.11.1 with this fix. Can you check

[mpaulucci]

Hi @akiran, sorry about my ambiguous message. I thought the flicker was related to the dots issue and solving one would solve both, but it seems they are not related after all, so the flickr issue is still present

[demobo-com]

I also see the flickering issue at the last item. I am using react-slick 0.11.1, Mac and Chrome 48.

[apennell]

I'm having the same issue in Chrome on a Mac and I'm glad it's already been detected and worked on! There's no problem in Safari or Firefox. I have infinite set to true and when the slides finish and go back to the first set, there is a flicker on the first slide on the far left. I hope this can be resolved soon! Thank you for this component though, it was just what I needed.

[Leannechn]

Is this issue fixed now? I'm having the same issue in Chrome on a Mac。 Can you tell me how to solve it? I want to know where the bug is。It`s so kind of you.

[NikitaMazur]

The same bug still here :(

[laveesingh]

@Leannechn @NikitaMazur I'll make sure to look into this.

[davydepauw]

I just detected the same flicker in our implementation...

[laveesingh]

@davydepauw I tried several configs but I was unable to reproduce any such flick, could you help me by giving some sort of demo-link or code snippet?

[Leannechn]

@laveesingh This phenomenon is random, when the slide speed is relatively fast when there is a greater probability.In particular, from last slide back to the first one. The reason for the preliminary investigation may be a chrome`s bug. I guess this is the reason，you can google to search： chrome trandition flicker / chrome trandition blink . https://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker

[leomyth330]

Same bug here when sliding between last & first items.

[leomyth330]

Fast reproducing steps from sample code in mac chrome.

1. Reduce items size to 3 from 6(original) in single item mode.
2. Scroll between first item(1) and last item(3) rapidly.

[dlong500]

I'm seeing this flicker with Chrome on Windows even in single item mode when transitioning from the last slide to the first. Unfortunately it is very noticeable.

[xpander001]

Same here, single mode from the last item to the first. Any possible solution?

[laveesingh]

We would highly appreciate PRs regarding this.

[ghost]

@laveesingh currently getting the flicker at the end of the loop with this setting:

const settings = {
    autoplay: true,
    dots: false,
    speed: 700,
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    draggable: true,
};

<Slider {...settings}>
    <h1 className={s.sliderImage}>test</h1>
    <h1 className={s.sliderImage}>test</h1>
    <h1 className={s.sliderImage}>test</h1>
</Slider>

.sliderImage {
    height: 500px;
    width: 100%;
    background: linear-gradient(-45deg, tomato, pink);
}

[nanyang24]

This problem is still recurrence

chrome: 65.0.3325.181（64） macOS 10.13.3

This is the 2018…………

[patrikmolnar]

Having the same issue still.. on Mac, using Chrome..

[i5on9i]

I also have a same issue on Windows, using Chrome.

FYI, I've tested with the css backface-visibility: hidden; and the option like the below

I used 3 slides.

infinite: true,
speed: 3000,
autoplay: true,
autoplaySpeed: 3000, // 3s
slidesToShow: 1,
slidesToScroll: 1,

After some test, I think it's because the react-slick uses the css transform.

Because with backface-visibility: hidden; , I see the flicking of the whole part of the first slide. without it, I see only a part of the first slide.

Also, the flicking part of the first slide is different depending on the speed option of the react-slide.

Final clue is when I uses the speed 3000ms, which is much slower than previous test, sliding animation works differently. When the slide is changed from 1st to 2nd after one loop, slide goes back to the 2nd slide in opposite direction.( with the below diagram, 1-->2-->3-->1+ --> 2) In this case, I can't see the flicking.

+------+    +------+   +------+  +-------+  +-------+
|   1  |    |   2  |   |   3  |  |   1+  |  |   2+  |
+------+    +------+   +------+  +-------+  +-------+

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

[Leannechn]

To delay one frame time after 'speed' ,16ms or more. It can hack this flicker too. And it does not have any perception of the user. inner-slider.js 405: speed + 16

[maddhruv]

Any update on this @akiran

[akiran]

@maddhruv Yes, Sometimes flicker happens. We couldn't reproduce this issue reliably

We should get back to this issue after fixing other issues

[maddhruv]

We should get back to this issue after fixing other issues

Okay

[vii120]

It works for me by adding useTransform: false to settings. Found it from slick issue #1890

[pixelomo]

@vii120 thanks!!

[antoniojps]

I'm still having this issueuseTransform: false didnt make it for me.

Update: Upgraded the package, all fine now with useTransform set to false 🎉

[jkincheloe33]

Why would this get moved to low priority? Issue has been present for years now.

[Console-buche]

It works for me by adding useTransform: false to settings. Found it from slick issue #1890

Just in case this might help someone : setting useTransform: false fixed the issue for me using antd carousel component. Had jerky/flickering issues and some delay on dots updating on iOS. All gone and smooth.

[Lloydinator]

Yep after hours of painstaking research, useTransform: false works for me.

[iamlykke]

I use this slider for showing event-posters on the TV and flickering was very noticeable (slide was 50% cut for 5-6 seconds). useTransform: false solved this issue.

[hitchcliff]

issue still occurs

[IlyaApaniuk]

The issue is still present, 2023 (facepalm)

[eminsonlu]

issue still occurs june 2023

[web-thidinh]

Update on October 28, 2023. Chrome, Firefox, Coc Coc is ok. Only flicker on Edge. Solved by add useTransform: false. But in condition you don't have custom arrow button, in my case. A bit confusing

[FadyBoj]

I use this slider for showing event-posters on the TV and flickering was very noticeable (slide was 50% cut for 5-6 seconds). useTransform: false solved this issue.

This worked for me just fine