Drag and drop causes page to scroll on iOS 11.3

[JWA111]

Opening this issue related to #561

The page scrolls when the user drags an element on iOS 11.3. Please refer to the demos on interactjs.io for a reproduction.

Expected behavior

When touch-dragging the page does not scroll

Actual behavior

When touch-dragging the page scrolls

System configuration

interact.js version: 1.3.3
Browser name and version: Safari iOS 11.3, Chrome 66.0.3359.122 on iOS 11.3
Operating System: iOS 11.3

Tested this issue on a physical iPad (latest gen)

[mcdemarco]

This webkit issue includes links to some other drag-and-drop libraries' issues, which may be helpful.

[JWA111]

For anyone who may be having this issue, here are three ways other libraries have worked around it:

Shopify/draggable#200
atlassian/react-beautiful-dnd#416
lazd/iNoBounce#47

[taye]

Can you try using v1.4.0-alpha.5 (npm install interactjs@next) and calling the code below before you create any interactables?

interact.addDocument(window.document, {
  events: { passive: false },
});

[taye]

v1.3.4 has been published with a fix for the new iOS 11.3 issue. Thanks for the help.

[hilmanski]

Anyone faced this issue currently and know how to solve this? I dont's see passive attribute in docs for events

[devutoo]

Anyone faced this issue currently and know how to solve this? I dont's see passive attribute in docs for events

I am facing it. Have you found a solution/hack/workaround?

EDIT: In my case, I set touch-action:none on a ul element, but not on the li elements. After adding touch-action:none to all li elements, it worked in iOS Safari 15.something.