Vertical scrolling on touch devices causes janky page scroll

[Appwerks]

When vertically scrolling on the flickety object on a touch device, the entire page gets janky. Furthremore, when scrolling downward, the flickity object appears to try to reposition itself upward in the viewport by 20-30 pixels or so. This does not occur when scrolling upward but the page scrolling is still janky.

Setting resize to “false” alleviates its severity but the issue persists.

Touch-scrolling outside the flickity object eliminates the issue and results in a smooth scroll.

[Appwerks]

The effect can be observed on the flickity project page, especially on the examples lower on the page. It’s less visible on the main/top slider.

The effect appears to be esepcially pronounced on longer pahes where there is (a lot of) content above and below flickity object.

[desandro]

Thank you for the feedback! I just tested on iPhone and iPad. I don't think I'm able to reproduce quite the same jankiness as you have described. Indeed, the scrolling behavior on touch devices is faked -- it's not native page scrolling. But I feel it works fairly well.

I'll leave this open in case others are running into the same issue.

[Appwerks]

Thanks for the quick reply. I took a quick at the code and see that the vertical scrolling, as you said, is indeed “faked” (i.e., the vertical offset is used to mimic vertical scrolling). I wonder if it would be easier, and more native feeling, if, when vertical scroll on touch is detected (touch.delta.Y > touch.delta.X), all flickity actions (swpes, drags, etc.) were stopped/suspended and the flickity object became just another “static” div.

That would result in native scrolling (and added bonus may be elimination of the lateral shifting of slides on vertical touch scroll).

I will look into this in the next few days and see how feasible it is unless there is a quicker/faster way to do this.

[dkdl]

I can replicate the issue as well. I'm using flickity for a fullscreen slider and on a iPad Retina and iPhone 6 it's very sluggish. Other sliders like Flexslider or Peppermint doesn't seem to have this problem.

[desandro]

@dkdl Thanks for chiming in. To be clear, is the vertical scrolling or horizontal scrolling sluggish?

[Appwerks]

In my case (and I ran a number of scenarios with different settings, flickity dimensions, etc.) page scrolling is supper choppy when I vertically scroll on a flickity object. The whole thing feels like fighting the flickity object’s tendence to shift itself up or down depending on which direction one wants to scoll the page.

[Appwerks]

For what it’s worth, my first attempt at finding a workaround fixed the vertical page scrolling but stopped the slider from working. Granted, I just focused on the vertical scroll part of the code and took what I thought was the most direct way of accomplsihing it. Will give it another try in the next few days.

[desandro]

FYI, you can disable vertical scrolling for touch devices with this option.

touchVerticalScroll: false

[dkdl]

I tried touchVerticalScroll but now I'm not able to scroll the page anymore because slider is fullscreen.

@desandro I'm only talking about vertical scrolling.

[desandro]

I'm finding it feels janky on Chrome for iOS

[demark]

Confirm janky page scroll on iPad 2 Safari (iOS 8.1.3). Best approach is: disable slider for vertical scrolling (like Peppermint slider do)

[apsolut]

Also i can confirm its janky when i try to scroll website part that have slider, touchVerticalScroll -> disable page scroll totaly when im into section that have slider...

[HarryWiles]

Definite jank on IOS 8.2, iPhone 5S.
Is there we can disable Flickity during the window scroll event? Or has anyone else found any work arounds for this?

[ricmas]

I tested with and without vertical scrollbar on these touch devices:
iPhone4s OS6 / iPad (4th generation) OS 8.1.3

--On iPhone--
The jerky effect occurs also with&without vertical scrollbar with "wrapAround" option enabled.
Same behaviour when swiping or clicking on prev/next, and also with autoplay enabled.
Load the page in portrait mode: jumps when the last element is reached.
Rotate to landscape mode: jumps always.

These are my setting and style added to default (images are all of the same dimensions)
$('.gallery').flickity({
wrapAround: true,
initialIndex:0,
imagesLoaded: true,
touchVerticalScroll: false
});

<style> .gallery-cell { width: 100%; } .gallery img{ display:block; width:100%; } </style>

Same code works well with/without scrollbar on the iPad.

On my notebook I have installed Windows 8.1 TOUCH the only problem caused by vertical scrollbar was the wrong calculation of images width. I did a CSS trick: body { overflow-y: scroll }, adding and removing a class on document ready; I know is not so elegant but solved.

I hope that my tests can help someone, let me know if I can do anything else.

[mgomes]

As @HarryWiles mentioned, it'd be great if vertical scroll were to get disabled during a slide event. It'd really tighten this up.

[desandro]

Flickity v1.0.1 has been released with fixes for touch scrolling. Try it out and holler if this problem persists.

[smartmike]

❤️

[sashabeep]

touchVerticalScroll: false
doesn't work on windows phone IE

[w3debugger]

I'm still facing issue in 2.1.1. Can @desandro please check again?

Thanks 👍

[desandro]

See #740 for janky iOS scrolling.

This thread has been locked as its for an older issue.