react-slick Flicker on animation

Flicker on animation

Open AHB opened this issue 8 years ago • 39 comments

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.

bug

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.

Feb 26 '16 09:02 AHB

On which browser and os you are seeing this issue ?

I don't see this issue in mac and chrome

Mar 02 '16 11:03 akiran

I'm also on Mac, Chrome 48.

Mar 02 '16 12:03 AHB

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

Mar 02 '16 15:03 mpaulucci

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

Mar 02 '16 16:03 akiran

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

Mar 02 '16 17:03 mpaulucci

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

Mar 07 '16 21:03 demobo-com

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.

Mar 13 '16 22:03 apennell

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.

Dec 04 '17 10:12 Leannechn

The same bug still here :(

Jan 31 '18 16:01 NikitaMazur

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

Feb 01 '18 05:02 laveesingh

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

Feb 01 '18 08:02 davydepauw

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

Feb 05 '18 08:02 laveesingh

@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

Feb 06 '18 09:02 Leannechn

Same bug here when sliding between last & first items.

Feb 20 '18 09:02 leomyth330

Fast reproducing steps from sample code in mac chrome.

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

Feb 28 '18 08:02 leomyth330

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.

Mar 18 '18 08:03 dlong500

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

Mar 19 '18 13:03 xpander001

We would highly appreciate PRs regarding this.

Mar 28 '18 10:03 laveesingh

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

Apr 09 '18 20:04 ghost

This problem is still recurrence

chrome: 65.0.3325.181（64） macOS 10.13.3

This is the 2018…………

Apr 27 '18 15:04 nanyang24

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

May 07 '18 10:05 patrikmolnar

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+  |
+------+    +------+   +------+  +-------+  +-------+

May 18 '18 01:05 i5on9i

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

Jun 11 '18 14:06 AdamColton8

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