Flicker on animation #248

AHB · 2016-02-26T09:34:58Z

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 · 2016-03-02T11:51:53Z

On which browser and os you are seeing this issue ?

I don't see this issue in mac and chrome

AHB · 2016-03-02T12:00:16Z

I'm also on Mac, Chrome 48.

mpaulucci · 2016-03-02T15:52:34Z

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:

react-slick/src/mixins/helpers.js

Line 223 in 9bbe0fa

currentSlide: targetSlide,

(sets currentSlide to 3)

And this one corrects it:

react-slick/src/mixins/helpers.js

Line 214 in 9bbe0fa

this.setState(nextStateChanges);

(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 · 2016-03-02T16:40:39Z

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

mpaulucci · 2016-03-02T17:23:19Z

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 · 2016-03-07T21:27:47Z

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

apennell · 2016-03-13T22:03:10Z

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.

* source_master: Added support for react@15.0 Keep original keys for slides Update Readme removes arrow refs Fixed akiran#162 fixed akiran#177 Fixed akiran#177 version update fixed akiran#248 jsfiddle snippet Updating documentation to list nextArrow and prevArrow as settings, and providing an example Update README.md Update README.md updated version Fixed autoplay issue Fixes an error when using react-slider with an immutable collection. Added missing type for infinite in README matching default functionality to slick Fixed akiran#238

Leannechn · 2017-12-04T10:52:58Z

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 · 2018-01-31T16:04:29Z

The same bug still here :(

laveesingh · 2018-02-01T05:59:28Z

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

davydepauw · 2018-02-01T08:15:45Z

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

laveesingh · 2018-02-05T08:51:38Z

@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 · 2018-02-06T09:37:51Z

@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 · 2018-02-20T09:06:53Z

Same bug here when sliding between last & first items.

leomyth330 · 2018-02-28T08:22:21Z

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.

dlong500 · 2018-03-18T08:44:33Z

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 · 2018-03-19T13:12:57Z

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

laveesingh · 2018-03-28T10:20:44Z

We would highly appreciate PRs regarding this.

ghost · 2018-04-09T20:00:34Z

@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 · 2018-04-27T15:08:58Z

This problem is still recurrence

chrome: 65.0.3325.181（64）
macOS 10.13.3

This is the 2018…………

patrikmolnar · 2018-05-07T10:50:52Z

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

i5on9i · 2018-05-18T01:46:06Z

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 · 2018-06-11T14:37:23Z

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 · 2018-06-12T09:43:22Z

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 · 2018-10-14T14:10:36Z

Any update on this @akiran

akiran · 2018-10-14T16:04:46Z

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

We should get back to this issue after fixing other issues

maddhruv · 2018-10-14T16:14:13Z

We should get back to this issue after fixing other issues

Okay

vii120 · 2018-10-30T09:29:34Z

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

pixelomo · 2019-01-21T02:13:54Z

@vii120 thanks!!

antoniojps · 2019-02-06T15:56:17Z

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

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

jkincheloe33 · 2019-06-07T18:40:37Z

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

Console-buche · 2022-01-16T08:41:45Z

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 · 2022-07-09T08:28:58Z

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

- V1에서 제시하는 mobileImageUrl이 현재 제공되어있지 않으므로 display: none 처리 하였음 - 크롬에서 slick을 사용하였을 때 flickering 이슈가 발생하였으며, 성능 상 트레이드오프를 감안하더라도 잘 보여주는 것이 우선이기 때문에 transform 사용을 제한하였음 - 관련 레퍼런스: akiran/react-slick#248

iamlykke · 2023-01-26T14:45:27Z

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 · 2023-02-10T15:44:52Z

issue still occurs

IlyaApaniuk · 2023-06-15T15:59:20Z

The issue is still present, 2023 (facepalm)

eminsonlu · 2023-06-30T14:54:27Z

issue still occurs june 2023

web-thidinh · 2023-10-28T00:46:14Z

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 · 2024-02-09T21:12:39Z

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

akiran closed this as completed in 2ba70a7 Mar 2, 2016

akiran reopened this Mar 2, 2016

laveesingh added the Priority: Low label Feb 1, 2018

laveesingh closed this as completed Feb 20, 2018

akiran reopened this Feb 21, 2018

akiran added priority: High and removed Priority: Low labels Feb 21, 2018

akiran mentioned this issue Feb 21, 2018

Slight flicker in single slide more at the end of the transition in demos #86

Closed

laveesingh added this to the .21 milestone Feb 28, 2018

laveesingh modified the milestones: .21, .22 Mar 20, 2018

maddhruv added Priority: Low and removed priority: High labels Oct 14, 2018

Flicker on animation #248

Flicker on animation #248

Comments

AHB commented Feb 26, 2016

akiran commented Mar 2, 2016

AHB commented Mar 2, 2016

mpaulucci commented Mar 2, 2016

akiran commented Mar 2, 2016

mpaulucci commented Mar 2, 2016

demobo-com commented Mar 7, 2016

apennell commented Mar 13, 2016

Leannechn commented Dec 4, 2017

NikitaMazur commented Jan 31, 2018

laveesingh commented Feb 1, 2018

davydepauw commented Feb 1, 2018

laveesingh commented Feb 5, 2018

Leannechn commented Feb 6, 2018 • edited

leomyth330 commented Feb 20, 2018 • edited

leomyth330 commented Feb 28, 2018 • edited

dlong500 commented Mar 18, 2018

xpander001 commented Mar 19, 2018

laveesingh commented Mar 28, 2018

ghost commented Apr 9, 2018 • edited by ghost

nanyang24 commented Apr 27, 2018 • edited

patrikmolnar commented May 7, 2018

i5on9i commented May 18, 2018 • edited

AdamColton8 commented Jun 11, 2018

Leannechn commented Jun 12, 2018 • edited

maddhruv commented Oct 14, 2018

akiran commented Oct 14, 2018

maddhruv commented Oct 14, 2018

vii120 commented Oct 30, 2018

pixelomo commented Jan 21, 2019

antoniojps commented Feb 6, 2019 • edited

jkincheloe33 commented Jun 7, 2019

Console-buche commented Jan 16, 2022

Lloydinator commented Jul 9, 2022

iamlykke commented Jan 26, 2023

hitchcliff commented Feb 10, 2023

IlyaApaniuk commented Jun 15, 2023 • edited

eminsonlu commented Jun 30, 2023

web-thidinh commented Oct 28, 2023 • edited

FadyBoj commented Feb 9, 2024

Leannechn commented Feb 6, 2018 •

edited

leomyth330 commented Feb 20, 2018 •

edited

leomyth330 commented Feb 28, 2018 •

edited

ghost commented Apr 9, 2018 •

edited by ghost

nanyang24 commented Apr 27, 2018 •

edited

i5on9i commented May 18, 2018 •

edited

Leannechn commented Jun 12, 2018 •

edited

antoniojps commented Feb 6, 2019 •

edited

IlyaApaniuk commented Jun 15, 2023 •

edited

web-thidinh commented Oct 28, 2023 •

edited