Scrolling occurs when dragging in iOS 11.3

[matstc]

Since the iOS upgrade to 11.3, both Chrome and Safari scroll instead of dragging. The result is very similar to the video example from a previous bug. However, in my case, dragging is never possible without scrolling too.

Both Chrome and Safari worked well with iOS 11.2.

• Library version: 1.0.0-beta.5
• Browsers: iOS 11.3 Safari, iOS 11.3 Chrome (64?)
• Tech stack: Vanilla JS
• Other information: I believe this has to do with event listeners becoming passive by default. I was able to work around the problem by making a full-bleed div scrollable instead of relying on the body of the document. This workaround disabled smooth scrolling which I tried to enable by setting -webkit-overflow-scrolling but then the scrolling problem re-appeared. I also tried to modify the draggable code and use {passive:false} as options to addEventListener when registering the touch events but that did not fix it.

[tsov]

Thanks for reporting @matstc !

We have fixes for this issue in the v1.0.0-beta.6 branch

• c8b0224 fixes some scrolling issues (mainly some flickering on mobile)
• 06fe72f fixes the weird state where you are both scrolling and dragging

To fix the weird state of both scrolling and dragging, we need to check the cancelable property of TouchStartEvent and prevent dragging if it's not cancelable. If TouchStartEvent#cancelable is false the user agent decides to scroll instead, which means we need to bail out and prevent drag:start.

From the spec:

Canceling a touch event can prevent or otherwise interrupt scrolling (which could be happening in parallel with script execution). For maximum scroll performance, a user agent may not wait for each touch event associated with the scroll to be processed to see if it will be canceled. In such cases the user agent should generate touch events whose cancelable property is false, indicating that preventDefault cannot be used to prevent or interrupt scrolling. Otherwise cancelable will be true.

We are planning on releasing this with the new beta real soon!

Hope this helps

[matstc]

Thanks a lot @tsov. Very useful. I'm happy to test this again as soon as the beta is available.

[tsov]

No problem @matstc, will let you know once it's available 👍I'll keep this issue open until then

[alexreardon]

Hi there, we are experiencing the same issue for react-beautiful-dnd: atlassian/react-beautiful-dnd#413

I think you will find this is causing you grief:
https://github.com/Shopify/draggable/blob/master/src/Draggable/Sensors/TouchSensor/TouchSensor.js#L90

There is an underlying webkit bug that I have raised. You can also have a look at the PR relating to the issue I found for a temporary work around

[tsov]

@alexreardon thanks for your comment! That's annoying, I guess I didn't realize this was iOS 11.3 specific, as we were experiencing some issues on touch anyway.

I was getting the same behaviour on Chrome (65.0.3325.181) on Mac (10.13.3) in device mode with touch events and got worried that webkit will adopt it in the future.

For now we'll implement a similar workaround and follow and support your webkit bug report 👍I am not sure how intentional this change was, because I could imagine it to relate to more performance improvements for scrolling. Nonetheless, this probably broke pretty much any dnd library that supports touch out there 😬

I hope we can trigger a discussion around this in the webkit bug report, because the current workaround is a no-no if we want to support dragging between iframes.

[tsov]

@matstc This should be fixed in the beta.6 release, thanks for your contribution 👍

[matstc]

Thanks @tsov. I tested this in Safari on iOS 11.3 and it's working nicely.