Carousel animation doesn't work on iOS Chrome

[ImranBug]

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

1. Open up http://kenwheeler.github.io/slick/ link on Chrome iOS.
2. 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

[laariiane]

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

[MikeThomasDev]

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.

[ominfowavedesigner]

I have the same problem please give me a solution.

[MikeThomasDev]

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

[ahmadalfy]

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.

[ImranBug]

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

[dejvlamm]

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

[ImranBug]

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

[ccurtin]

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.

[salievvm]

Just update your chrome on iphone, it'll work

[HereAgency]

I am still experiencing the same issue. Has anyone come up with a solution?

[vladkramar]

Hi everyone!
I have experienced this issue too, and it seems to be I have found how to resolve this kind of lag on mobile devices.
To solve this issue add two additional options to your slick initialization:

useTransform: false,
speed: 300,

For some reason, the mobile version of Chrome browser can't smoothly animate transition properties such as
transform: translate() or transform: translete3d().