Slick: Carousel animation doesn't work on iOS Chrome

Created on 27 Mar 2019 · 10Comments · Source: kenwheeler/slick

Short Description:

Animation not working as expected on iOS Chrome but works fine on Safari & Desktop not sure about Android.

Slick own link have this issue: http://kenwheeler.github.io/slick/

====================================================================

Steps to reproduce the problem

Open up http://kenwheeler.github.io/slick/ link on Chrome iOS.
Swipe any slide or press the arrows/dots & you wont see smooth animation just a jerk to next slide.

====================================================================

What is the expected behaviour?

Slides should animate smoothly like they do everywhere.

====================================================================

What is observed behaviour?

It jerks to the next slide without taking any animation time.

====================================================================

More Details

Which browsers/versions does it happen on?
Chrome
Which jQuery/Slick version are you using?
jQuery version: jquery-1.11.0.min.js
Slick Version: 1.8.0
Did this work before?
Yes I think slick worked fine, I have used it on many projects but looks like in the latest iOS version or the Chrome latest version is causing this... someone told me this bug is also on Android Chrome but I haven't checked that my self.

In addition to above description I made a video of this issue which can be seen on this link: https://youtu.be/m2n0SBrVkBY

Source

ImranBug

👍1

Most helpful comment

I was reading a thread on Google, they said it's because of iOS and WebKit and apparently this is an issue that the Chrome team is aware of and hopefully will be fixed in an update. Needless to say it's effecting animation in general not just Slick Slider.

MikeThomasDev on 6 Apr 2019

👍3

All 10 comments

I have the same problem, did someone find a solution ?

laariiane on 2 Apr 2019

👍1

MikeThomasDev on 6 Apr 2019

👍3

I have the same problem please give me a solution.

ominfowavedesigner on 30 May 2019

👍1

It’s fixed in iOS 12.3.1, Chrome V74. Smooth as a hot knife through butter.

MikeThomasDev on 30 May 2019

👍1

Can @ImranBug confirm? Seem from the comments this is not directly related to slick but animation in general in Chrome iOS. Closing unless @ImranBug says it’s not fixed.

ahmadalfy on 17 Jul 2019

@ahmadalfy Yep, it have been fixed now, just checked on my iPhone XR

ImranBug on 17 Jul 2019

👍1

I am having this issue on iOS 12.4 in chrome 77.0.3865.69.
Anyone else experiencing the same thing?

dejvlamm on 15 Sep 2019

@dejvlamm Indeed the issues seems to have popped up again but let's just wait for chrome to fix it again, that's all we can do.

ImranBug on 25 Sep 2019

Could remove CSS transitions completely in favor of using requestAnimatiomFrame to update transform props. Would require a bit of work and I’d imagine there’s quite a few hurdles though.