Performance issues in iOS 12 and 13 (beta)

[vukhacbiet]

Dear Desandro and Flickity contributors,

I used Flickity in my web and mobile app for two years, it’s very great, sure.

Recently, my customers have complained about issues in my carousel, it is performing not well in low battery mode, animations are slower than normal, hard to scroll.

In iOS 13 (beta), its hard to scroll in freescroll mode, and i can vertical scroll when dragging my carousel.

In my app:

https://vimeo.com/344452939

[KjellBronkhorst]

Experiencing the same issue.

Sliders in my project react very clunky on the new Iphones, whilst my galaxy s8 and iphone 6 users have a smooth experience.

[desandro]

Thanks for reporting this issue. I'll have to take a look.

[aaronstezycki]

Can confirm these issues, having the same kind of problems on iOS 13 (beta) on an iPhone X

[lucassimines]

I'm having the same issues.

[tonesfrommars]

+1

[spinninghamster]

Does anyone have a solution to this? Was about to implement it and then I found out about this bug :(

[vukhacbiet]

I'm using Swiper for a temporary solution.
Check my codepen

https://codepen.io/vungo246/pen/pXrYbg

[bakura10]

We are using Flickity for themes sold on Shopify platform, and we receive some customers trying beta of iOS 13 reporting this issue as well. This is likely going to be a major bummer for us with flood of hundreds of support requests suddenly coming, so I'd love to be able to fix that as soon as possible. Is there a known fix on Flickity side?

[jonathanmoore]

I'm also experiencing the same thing in both Chrome and Safari on the iOS 13 beta. However, unlike @vukhacbiet it seems to be happening both with a full battery as well as the low battery, throttled performance mode. I can confirm the performance issue on the Flickity demo site as well as other sites that use Flickity like compass.com.

Later this week I'm happy to dig in more to see if I can pinpoint the exact issue. Other sliders like https://idangero.us/swiper/ seem to perform well on iOS. My guess is that it is related to the other open #740 issue.

[saetia]

fix for iOS 13

.slider {
    touch-action: none; -webkit-user-select: none; -webkit-user-drag: none;
}

[AlexWebLab]

This is working perfectly for me: (replace '.carousel' with the appropriate selector of yours)

<!--[if !IE]--><script> $(document).ready(function() { var tapArea, startX ; tapArea = document.querySelectorAll('.carousel'); startX = 0; for (var item of tapArea) { item.ontouchstart = function(e) { startX = e.touches[0].clientX; }; item.ontouchmove = function(e) { if (Math.abs(e.touches[0].clientX - startX) > 5 && e.cancelable ) { e.preventDefault(); } }; } }); </script><!--<![endif]-->

[rubenbristian]

fix for iOS 13

.slider {
    touch-action: none; -webkit-user-select: none; -webkit-user-drag: none;
}

This is not a good solution, because it also disables scroll on the entire page. You will never be able to get past the slider.

[saetia]

fix for iOS 13

.slider {
    touch-action: none; -webkit-user-select: none; -webkit-user-drag: none;
}

This is not a good solution, because it also disables scroll on the entire page. You will never be able to get past the slider.

most sliders are not the height of an entire screen.

[lucassimines]

When it's gonna be fixed?

[verde-io]

I can confirm this is still happening on iOS 13 (both Chrome and Safari), in low power mode freescroll doesn't scroll smoothly, the animation is really choppy (a bit like trying to scroll without having -webkit-overflow-scrolling: touch).

[lenzmeier]

Having issues here too. On iOS 13 Safari it's hard to swipe between slides. iOS 12 was fine. Tried to adjust dragThreshold without success.

[verde-io]

@lenzmeier If you're also having issues with non-freescroll sliders, try the fix #959 (comment) by @AlexWebLab, that seems to improve the issue in scrolling pages. Had a client report it yesterday and today they're happy, although I can still produce instances when the slider doesn't want to advance to the next slide, quite randomly.

The issue with freescroll & low power mode seems completely unrelated in my opinion and it's quite a tricky one to wrap my head around, as normal sliders seem unaffected. Perhaps @desandro can give us a pointer, thank you!

[wayheming]

I'm having the same issues.

[susanlangenes]

Can confirm fix by @AlexWebLab in comment #959 is working for me in a Shopify theme.

[seriusokhatsky]

Hi @desandro

Do you have any information about the fix to this issue? Seems that the library becomes useless if it doesn't work with the iOS platform. Would be glad to hear from you soon.

Thank you!

[lenzmeier]

@verde-io In my case it's not in a scrolling page but a fixed fullscreen slider. The slides are harder
to swipe since iOS 13 and feel almost sticky.

[verde-io]

@lenzmeier Did you try the Js/Css fixes mentioned in this thread? They should work.

Even if the page doesn't have enough content to scroll, if you don't disable the rubber band effect (for example by preventing touchmove), I suspect the problem would still show. You could also look into https://www.npmjs.com/package/body-scroll-lock if you have a more particular use-case, it is very helpful and easy to implement.

[lenzmeier]

@verde-io Thanks. I tried the mentioned js/css fixes and scrolling is disabled but still no success.

[rubenbristian]

I'm using this fix from @bakura10 and it works very well: https://gist.github.com/bakura10/b0647ef412eb7757fa6f0d2c74c1f145

Also, you should update to 13.1, it works better.

[bakura10]

@rubenbristian It is not my fix though... all the credits goes to woahdae :) : #740 (comment)

[verde-io]

@lenzmeier Does this work ok for you? https://demo.invisible.tools/gallery-default/

[lenzmeier]

@verde-io Impossible to go to next slide unless I swipe the full screen width (running on iPhone X w/ iOS 13.1.2).

[verde-io]

@lenzmeier that is a really weird one, as it works fine for me on both an iPhone 11 and iPhone 8, I only need to flick it a bit to make it advance to the next slide.

[FynnZW]

I had the same problem, for now I've rolled back to version 2.0.11.
Maybe some of the new features cause issues on iOS 12+13?

[yllip]

We have the same issue too. Hope that Flickity will soon release an update that fixes the issue.

[marijke34]

So super-beginner question here, trying to fix this problem in a code I didn't write.. where to add the Bakura10 code, in the flickity.min.js itself?

[lenni-io]

@marijke34 For quick answer: Put in in your main js file after initialization of the flickity slider.

[aunruh]

None of the fixes work for me for Safari on iOS 13.2.3 :(

[spinninghamster]

Does this bug also happen in Cordova (WKWebView)? Or only through the browser?

[HandHugs]

Issue is still at large - is flickity not being supported anymore? I have issues in Chrome and Safari, even with the patch by @bakura10 depending on the browser and iOS version.

[laygir]

Have you tried on iOS 13.3 update? That solved the problem for me.

[HandHugs]

Have you tried on iOS 13.3 update? That solved the problem for me.

Not all our websites users updated so while my phone doesn't do it, a ton of our users are still having major usability issues with our site.

[verde-io]

@HandHugs It seems @desandro stopped giving support for some time, he tweeted about it some months ago and said he will be back, but I wouldn't hold my breath. I would pay for this to be properly fixed but not sure if that would be an incentive. I was meant to do more extensive testing but haven't managed to yet, I had a look at the source but it would take me much longer to fully grasp everything.

On the long run I would say it's probably better to move away from Flickity to something like Swiper, which seems to be the most popular still supported alternative. Tbh this is why in the past I used to have my own custom sliders... definitely not as fully featured, but without the added bugs and issues.

[lucassimines]

I moved from Flickity to Swiper and I think it’s much better.

[nik-arthur]

I managed to get my particular use case solved with native CSS scroll snapping. Obviously not as features rich as Flickity or Swiper, but might suit your needs better and browser support is pretty good at this point.

[HandHugs]

Would love to hear an update on this - it's really hard for us to just switch to a new slider because this one is so integrated in with our theme. It would cost a couple thou to get it all switched to a new slider, and since everything else is working well with it, we would love to just fix this issue!

[desandro]

Hi! Sorry for the radio silence. I had to step away from Metafizzy development for a bit.

Can you please confirm if this bug is still and issue on iOS 13.4?

I am examining this issue on iPhone 8 with iOS 13.4.1. I am not able to reproduce the buggy behavior. I would like to this this has been resolved on the browser side. Your feedback would help here.

[verde-io]

@desandro You can see a video here:
https://www.dropbox.com/s/bnw6dq0mkvt3v04/flickity-bug.mov?dl=0

Seems to be happening when dragging from the edge of the screen in a shorter movement, but also sometimes if I do very short swipes in the middle of the screen. As you can see sometimes it hangs a couple of times on the same slide, sometimes it's just once, sometimes not at all. It seems as if the slider sometimes prematurely thinks it has reached the last slide, although it hasn't.

This was the link used to make the video: https://demo.invisible.tools/gallery-loop

Using Flickity 2.2.1.

Thanks.

[jvwrx]

@desandro Still happening for me as well. Video here: https://www.dropbox.com/s/fu2vluvizfcceoh/FlickityMobileSwipeBug-2020-06-17.mp4

Using flickity.metafizzy.co homepage slider. First swipes through are fine but ran into issues when going backwards, then in either direction.

iOS 13.5.1
Mobile Safari
Flickity 2.2.1 at time of video

Thank you!

[verde-io]

@desandro Sorry to press again on this but what is the likelihood of a fixed being implemented anytime soon, given that it's been a year since this has been reported? Since you replied one month ago would want to know at least if you had a quick look at it and if it's something that can be fixed?

[richgcook]

@desandro Sorry to press again on this but what is the likelihood of a fixed being implemented anytime soon, given that it's been a year since this has been reported? Since you replied one month ago would want to know at least if you had a quick look at it and if it's something that can be fixed?

👋🏻 Use https://github.com/nolimits4web/swiper?

[verde-io]

@richgcook Yeah that's what I was thinking to do, Flickity seeems dead, at least for now.

[fslone]

Can confirm this is still happening in iOS 14.7.1, but the fix from @AlexWebLab seems to be working for us. Many thanks.

[vasanthangel4]

@desandro: NO movement on their carousel at all. iOS 15.0.1 & 14.8. scrolling is not working. could you please help on this,.

[vasanthangel4]

@milanidavide @nikopol-fw @bluedge @PietM @Hlsgs @ale-grosselle

IOS 15 touch drag/page dots is not working properly. i did not see the any error in the log. could you please guide me to fix this issue.

[vasanthangel4]

@fslone: is it working for you in iOS 15?

[vasanthangel4]

@desandro : i have using vanilla javascript. i have updated like this as well. but after add this code also iOS 15 scroll is not woking. <script type="text/javascript">
var $carousel = $('.carousel').flickity();

$carousel.on( 'dragStart.flickity', function( event, pointer ) {

document.ontouchmove = function (e) {
e.preventDefault();
}
});
$carousel.on( 'dragEnd.flickity', function( event, pointer ) {
document.ontouchmove = function (e) {
return true;
e.preventDefault();

}
});

</script>

[vasanthangel4]

@desandro : scrioller is not working in iOs 15. first of all, it's a great library, I used it in my projects, but scroll and dots click not working in ios 15. i just want to know if you have this problem. if you working on it?

[jshrssll]

Still able to replicate this issue on iOS 15 😞

[AlexWebLab]

This repository is officially on hiatus. Tweet from the author: https://twitter.com/metafizzyco/status/1456385307448954889

[desandro]

Flickity v2.3.0 has been released with animation fixes for iOS 15, See issue #1177.

I am going to close this issue, as it was originally for iOS 12 & 13, and fixes for 15 are in, and we need a fresh start to track animation issues with iOS. Thanks all.