Slick: Slick inside iFrame stuck on iOS

[raiffeisennet]

When using Slick inside an iframe, everything works fine except on iOS. Here, the browser starts to be very very slow and the Slick exceeds the iframe's width.

[leggomuhgreggo]

Usually when I see this it's something to do with a bunch of large images, but I doubt it's something to do with the Slick library. If you have a test case I can reopen, but for now I'm closing.

[fbring]

I had the same bug in a client project, but I tried to isolate the issue.

Demo-Site:
https://fbring.github.io/slick-iframe-bug/index.html

I tested with an iPad:

"Mozilla/5.0 (iPad; CPU OS 10_3_3 like Mac OS X) AppleWebKit/603.3.8 (KHTML, like Gecko) Version/10.0 Mobile/14G60 Safari/602.1"

and with an iPod:

Mozilla/5.0 (iPod touch; CPU iPhone OS 9_3_5 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13G36 Safari/601.1

I expected this:
(Chrome 63)

But i got this:

If you need anything else, just let me know.

I hope these information help, to trace this bug down.

[runxc1]

Why is this closed? I am running into a similar error when the iFrame has a width of 100%.

[herrw]

This has to be reopened again. I ran into this bug as well and i need to find a fix for that... Slickslider developers should be here and try to help.

BTW: It's impossible to make a jsfiddle for that because you cannot reproduce this bug in a fiddle. It's only happening when you load a slick slider within an iframe with a mobile device.

[runxc1]

So as a note with this I found that I had to update the CSS a bit adding the following goofiness

div.slick-slider { width: 1px; min-width: 100%; *width: 100%; }

I also found that infinite had to be set to false to work correctly in iOS within an iFrame.

[maheshwaghmare]

Strange! This issue is still exist.

If are you use the WordPress then you can reproduce the issue. I have used Elementor widget to create a slider. Elementor have the slick slider version 1.8.1. I have updated the JS to latest version 1.9.0 but the issue is still exist.

Follow below steps to reproduce the issue:

1. Create a page with the Elementor and add the widget Image Carousal
2. Create another page and add the code in the <iframe src="http://example.org/slick/" style="height: 100vh; width: 100vw;" />
3. Check the page in the iphone. I have tested it on https://browserstack.com & actual device. On both issue exist.

After I use the @runxc1 provided CSS it works as expected.

div.slick-slider { width: 1px; min-width: 100%; *width: 100%; }

[rcontractor]

Where do you put this line : div.slick-slider { width: 1px; min-width: 100%; *width: 100%; } ?
I tried in slick.css after the .slick-slider, which did not work.

[runxc1]

@rcontractor are you trying to use the infinite option? As for where to put it I have it outside the css file on the page so essentially at the bottom of the file.

[webservices-nm]

Great solution @runxc1. I had the exact same conditions - namely Slick in an iFrame and only crashing in an iOS browser - same behavior in Safari, Chrome and Firefox for iOS. For this project it's unavoidable as an iFrame is the only option for this particular client.
Once Slick was initiated on an element, after the NEXT change to the DOM, Slick would readjust the width even though the DOM change didn't affect the width. Sometimes the page would crash, other times I would see a blank white screen as Slick kept making the page wider and wider. I could sometimes scroll sideways for 10,000+ pixels and find the data.

[nadiManaku]

Thanks for the solution.
I had the same issue, the slick slider was not working only on iPhone when the app was integrated as an iframe.
First I set the infinite loop to false, but that didn't fix the issue.
It was fixed when I added the CSS.