Vertical scrolling on touch devices causes janky page scroll

Appwerks commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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

Appwerks commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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

touchVerticalScroll: false

dkdl commented 9 years ago

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 commented 9 years ago

I'm finding it feels janky on Chrome for iOS

demark commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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 });

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.