Slick: Not working on iPhone Safari

[gultyaev]

I've got an iPhone 6S with Safari. When I visit my site I see that the slider isn't working and all the slides are displayed as if I just added them in divs. So that I can suppose that it doesn't initialize on iPhone Safari. In Chrome it works

====================================================================
Codepen

Steps to reproduce the problem

1. Add a slick slider with many images
2. Open with Safari on iPhone
3. See that carousel wasn't processed

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

What is the expected behaviour?

Should work

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

More Details

• Happens on Safari on iPhone 6S
• Slick 1.8.1

P.S. Please update NPM repository so that we could use latest 1.9.

[joshuaajones]

Same issue here with rendering the responsive breakpoints on iphone 6/7/8 (actual phones not emulators). Seems to be a known issue with memory allocation in iphone mobile safari browser. So far as I can tell in my tests, removing the responsive option solves this problem, but naturally isn't the desired solution...

+1 for updating NPM to 1.9 - @kenwheeler thanks for the great package!

[chris-amazee]

I'm seeing the same behaviour. The slider works as expected in Chrome and Firefox, but fails to initialize in the native browser on some mobile devices (the exact devices is difficult to pin down, it fails to initialize on one iPhone X, but works on a different iPhone X).

I'm guessing this is related to memory allocation as mentioned by @joshuaajones above. But in my case, removing the responsive option didn't fix the problem.

[Fluidic2B]

I too, am seeing this issue. I am able to see the issue using the Browserstack emulator, as I do not have any IOS devices. I specifically tested iphone6 and iphone8, but there are probably others. I used both Chrome and Safari on those devices.

Any word on if / when this will be fixed? I'm a fan of Slick; would be really helpful to get this problem resolved. Thank you.

EDIT Issue seems to be resolved now - I had some special jQuery selector code that I cleaned up
specifically, this format;
$('[id^="value"]')....
as well as some unused (possibly conflicting jquery code).

[gobrendan]

I was experiencing this issue when using the "responsive" setting. I put the Slick init in an "on ready" function and it resolved the problem.

$(function() {

// Slick init

}

[nadiManaku]

If someone is still struggling with this issue please see the solution here
https://github.com/kenwheeler/slick/issues/2834

[StefanoMartella]

In my case the problem was that I was using webp files that are currently not supported on IOS. Converting images into png solved my problem.