search

kornelski / slip

Slip.js — UI library for manipulating lists via swipe and drag gestures
BSD 2-Clause "Simplified" License
2.44k stars 213 forks source link

Scrolling while dragging seems to be broken #109

Closed cckrause closed 5 years ago

cckrause commented 5 years ago

This feature seems to be broken in Chrome. Haven't had the time to investigate further but i use slip.js for a production feature to reorder a list and without changing the biz logic this feature stopped working in Chrome Version 72.0.3626.121 / OSX 10.13.4

carter-thaxton commented 5 years ago

I can confirm that I'm seeing this, too, on iPhone, using Safari as well as Chrome. Chrome on OSX also has the bug. Safari on OSX is working a little better, but has a different bug, where the drag gets out of sync with the mouse.

I'll take a look and dig into this. Thank you for reporting it. I too use this in a production feature.

carter-thaxton commented 5 years ago

@cckrause Could you confirm that the above PR fixes your issue, too? If so, I'll merge it.

cckrause commented 5 years ago

i'll have a peak...

cckrause commented 5 years ago

nope, its just scrolling downwards while dragging...

cckrause commented 5 years ago

Would be awesome to have the screen cut into 2 sections for each direction. 1. slow and 2. fast scroll. In the middle a threadhold of lets say about 1/5 of screen size where scrolling can be stopped.

carter-thaxton commented 5 years ago

@cckrause The idea is for it to have such a behavior. There's a scroll offset that gets calculated based on how close you're dragging to the edge of the scroll container. Do you happen to have a link to your site that's not working? I'd be happy to take a look and see. Might make a good use-case for testing.

carter-thaxton commented 5 years ago

I found that recent versions of webkit have implemented their own version of scrolling during a drag that is overriding the behavior of this library. I'm wondering if you're running into that issue in your app. I had to play with which element was being chosen as the scroll container. Everything seems to work fine if it uses html element (which is what document.scrollingElement refers to), but not if it uses body. That's different from the behavior of webkit a few versions ago.

cckrause commented 5 years ago

Unfortunately it`s a web component and part of a native application so i think its not possible for you to test it. It still working on safari. I stitched together an example with your patch, and its working... https://jsfiddle.net/m180uLdr/

i'm using a flexbox layout right now, so i guess the issue is located somewhere there.

cckrause commented 5 years ago

Ok, found the source of all evil: html {height: 100%;}. So i guess that issue is fixed with your patch.

carter-thaxton commented 5 years ago

Ok great. I've tried out my patch on Android, iPhone, Windows and OSX, using Safari, Chrome, and Opera browsers. All seems to work. I'm going to merge this PR. @kornelski would you mind publishing a new version?