It seems like mobile safari crashes when slick-track gets too large.

[aagd]

I have a large slider with 110 images (720x720px). I replaced the images with empty divs to be sure it's not the images that cause the crash. At around 67000px my iPad 3's Safari (latest iOS) crashes. The exact number seems to vary. My iPhone 3GS (iOS 6.1.6) seems to crash at similar values. Any ideas for a workaround? Or a different slider that doesn't use a giant div like slick-track?

Edit: Removed broken demo link

[aagd]

I found a way to get it working, even with all those large images. Not sure why this helps, but all I did was deactivating these vendor-prefixed styles and just using the regular transform. I guess this will break on older browsers then, but that's a much smaller problem for me now.

.slick-slider .slick-list,
.slick-track,
.slick-slide,
.slick-slide img {
  /* -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);
}

Edit: Removed broken demo link

[colbyfayock]

@aagd have you noticed any issues leaving the vendor prefixes out in any browser?

[aagd]

@colbyfayock No, but I haven't really tested extensively. According to Can I Use: translate3d it should not work in most browsers, but so far i haven't found any issues. My slider is here if you want to test it.

[colbyfayock]

@aagd Ended up going with this and it's working well for us. Thanks

.slick-track,
.slick-slide,
.slick-slide img {
    transform: translate3d(0, 0, 0);
}
.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);
}

[kenwheeler]

@colbyfayock I think thats in there simply for hardware acceleration. I'm going to update master to what you've posted above.

[Agnate]

I was still having this issue on iOS 7 with mobile safari and 10 carousels, and it was only resolved when I removed the zoom: 1 property on .slick-track. Not sure if it can be globally fixed (as I imagine this is required for other browsers), but for anyone coming across this, zoom and the translate3d were the culprits.

[kenwheeler]

hey @Agnate what was the full fix. I'd like to make it core.

[Agnate]

I used @colbyfayock suggestion as well as removing the zoom: 1 property on .slick-track css here: https://github.com/kenwheeler/slick/blob/master/slick/slick.css#L11

It might break older versions of IE though, so I'm not sure if simply removing it is viable for the project as a whole? I'm using this on an AngularJS application for mobile-only browsers, so I'm not worried about old IE versions.

[Agnate]

As I mentioned in the issue, the fix I implemented worked in my use-case. I haven't updated to the newest version of Slick yet, so I can't verify that the updates fixed it for me. The app I was creating was already launched for the client, so there's currently no reason for me to do any sort of update to it (don't fix what's not broken and all of that), so I have no further information for you.

Sorry!

On Thu, Nov 27, 2014 at 5:03 AM, Filip Przydryga notifications@github.com wrote:

Any update with this? It says 'A problem occurred with this webpage so it was reloaded'. I tried @Agnate https://github.com/Agnate and @colbyfayock https://github.com/colbyfayock solutions but they break slick for me.

— Reply to this email directly or view it on GitHub https://github.com/kenwheeler/slick/issues/295#issuecomment-64769235.

[garrying]

@kenwheeler I was experiencing this issue with the latest version, but adding transform: translate3d(0, 0, 0); to img resolved it. I think it would be a benefit to add it to core for anyone dealing with large sets.

[kenwheeler]

@garrying wanna PR?

[murielg]

@kenwheeler I have a slider with 66 images that keeps crashing on an iPad after about 30~ slides. I used to have 2 sliders on the same page, each as a nav for the other, and the site would crash after scrolling about 18~ slides. I've removed the second slider, but I am still having issues, even after applying the transform: translate3d(0, 0, 0); fixes described earlier on this thread. Any thoughts/suggestions would be greatly appreciated. Thanks!

[kenwheeler]

@murielg how big are the images?

[murielg]

They are not big really. In dimension the images 600px wide or less, and no more than 400-300px tall. In size, the largest about 35 KB, but the majority of them are 10 KB or less.

[traummmaschine]

@kenwheeler @murielg I too am having issues on iOS (Safari and Chrome) crashing with a large full screen slider (above 15 / 20 large images it crashes) with 1.6.0.

I too tried the above transform3d additions, but no luck. However, when I commented out 'float:left;' under .slick-slide in the CSS, I found it no longer crashes – though I needed to add the following to .slick-active to ensure the current slide was still in view:

.slick-slide { float: none; } .slick-active { left: 0 !important; position: absolute !important; top: 0 !important; }

I've yet to test this fully across browsers – but also important to note I'm using the fade transition. This wouldn't work when using the 'slide' transition.

[leggomuhgreggo]

@traummmaschine thanks for the intel. I did some googling, and some people are finding the use of 3d transforms to be the culprit. I guess the advantages in framerate from hardware acceleration come at the cost of increased memory consumption which appears to not be managed well by safari mobile.

Your approach is interesting, but I'm cant see how to incorporate something like that into the codebase. I'm wondering if doing the opposite of prior intuitions and setting useTransform: false might help. I don't know you're set up, but I can also see fade, with custom css for the animation possibly working.

Thanks!

[3zzy]

@kenwheeler Sorry to dig up an old issue but I came here specifically looking for memory issues with large galleries. I'm looking to use slick for galleries (ebooks rather) with upto 1000 images and was wondering how it performs.

I currently use PhotoSwipe and it works well because:

• PhotoSwipe keeps only three images in the DOM at once, because each “slide” is a composited layer, which consumes quite a lot of memory.
• Almost no memory is consumed until the gallery is first opened.
• The script has been tested for memory leaks. Navigating images back and forth and creating or deleting a gallery doesn’t leave a trace in memory.
• RequestAnimationFrame is used wherever possible.
• Only the transform and opacity properties are animated. Almost no paints occur during animation, making transitions as smooth as possible.

..but it lacks RTL support so I'm looking to switch.

So I'm wondering if you already do the same with lazy loading enabled?

[TinyChou]

As @3zzy post.I encounter the same problem on some iPad tablets( which memory space only 1G).First, My images(50images and 300kb+- per image) loaded into the html Swiper. I try to zoom out/in and device crashed with memory issue: shell Message from debugger: Terminated due to memory issue I will turn to try PhotoSwipe.

[yashbh]

any updates on this , i need to find a replacement because i am facing this issue , page crashes when too many slides on safari or iphone