v2.3 issues: Mobile/touch/drag in general seems to be broken on both Android/iOS

[Waldoz53]

Test case: https://zgks3izigkl5gnth-27173519412.shopifypreview.com/ (this link may expire in a week or two so let me know if it works or not)

Hi,

On our Shopify site, we use the unpkg CDN for Flickity. It looks like as of 2.3 the mobile touch/drag scrolling doesn't work, on any mobile OS+browser combination. Specifying it to version 2.2 DOES work again, although touch and drag feels a bit iffy on Safari/iOS.

You can test whats going on here by going to the link above and scrolling down to the New Arrivals or Our Best Sellers section (or any product page) on mobile.

For some reason on Windows desktop on Chrome/Firefox and using their basic built in mobile view tool, touch and drag works perfectly, so at first I didn't see the issue until I opened it up on my android phone in firefox.

If you have any quick fixes please let me know 😀 Thanks

[desandro]

Thanks for reporting this issue. I was able to reproduce the same behavior as your describe. Not good!

To fix for Flickity v2.3.0, try adding this code

Flickity.Cell.prototype.renderPosition = function( x ) {
  var side = this.parent.originSide;
  this.element.style[ side ] = this.parent.getPositionValue( x );
};

[Waldoz53]

Where would I add this code? Since I'm just using Unpkg

[desandro]

You can add it in a <script> right after the unpkd script. Your HTML should look like:

<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<script>
Flickity.Cell.prototype.renderPosition = function( x ) {
  var side = this.parent.originSide;
  this.element.style[ side ] = this.parent.getPositionValue( x );
};
</script>

[Waldoz53]

Oh gotcha, I've added it but I don't think anything has changed. You can use that same test case link to check again

[vasanthangel4]

hi @desandro : i have updated the above code still accessibility is not working in ios devices. but it is working fine in Android . please let me know if any specific changes required to add.

[LeoSeyers]

Flickity.Cell.prototype.renderPosition = function( x ) {
  var side = this.parent.originSide;
  this.element.style[ side ] = this.parent.getPositionValue( x );
};

that fixes the issue on my side, thanks!

[desandro]

This issue has been quiet for a year. I'm closing for now.