drag objects on page scrolls mobile page

[mrtwebdesign]

As far as a demo goes I'd like to keep it independent of any code I might be writing and rather than make a codepen or something, the demo page for interactjs is perfect to demonstrate the issue.
http://interactjs.io/
If I switch back to 1.2.8 that I just updated from for my project, dragging on mobile is buttery smooth, but then links in draggable elements don't work and ignoreFrom isn't a function.
Updated to 1.3.0 fixed the link issues, but now dragging is broken.

Expected behavior

dragging an item by touch should drag the item in it's container without the page scrolling

Actual behavior

dragging an item moves the item horizontally in the drag container, but when dragged vertically, it stutters and when the item is dragged, the page also scrolls to catch up resulting the item being in roughly the same position vertically. It's not locked to the same position, but interactjs and iOS scrolling are racing to catch up to each other.

System configuration

interact.js version:1.3.0
Browser name and version:Safari iOS 11.1.1, Chrome 62.0.3202.70, Safari on iOS 10.3 on Xcode Simulator
Operating System:iOS 11.1.1, iOS 10.3

[taye]

Have you tried setting touch-action: none style on the target elements?

[mrtwebdesign]

I did notice the possible solution from @believer-ufa in issue #564
#564

I have to work on another project most of today, but I will be trying that tonight and I'll report back
Thanks!

[mcdemarco]

I think I saw this bug in mobile Safari (using UIWebView, iOS 11.1.2); the whole page jittered as I dragged elements around, and downgrading to 1.28 fixed it. I didn't need any newer functionality than 1.28 so I didn't investigate further.

[mrtwebdesign]

Sorry I didn't get back to this sooner. I did a quick screen recording of the drag behavior issue. This is with adding touch-action:none to the active elements, then all the draggable elements.
It's interesting to note that if I can get it into magnifying glass mode, it will drag smoothly. At that point Safari stops trying to drag the page because you are selecting text.

I checked and "touch-action" only has options for "auto" and "manipulation" on iOS Safari.
https://caniuse.com/#feat=css-touch-action

Here is a screen recording of the issue. I went ahead and just used the simulator. It's consistent with what I'm seeing on my phone and tablet.
https://www.dropbox.com/s/kooqshabbn751cb/mobile%20drag%20test.mov?dl=0

[steveHornseyDeveloper]

I am having a similar issue. Updating to 1.3.2 doesn't seem to have fixed it. @mrtwebdesign did the change resolve it for you?

[mrtwebdesign]

@steveHornseyDeveloper
I downloaded the 1.3.2 stable branch and did a test with it. I'm very happy to see it working!

Note that in the screen recording I can force it to fail. I have text elements set to contenteditable="true". So that's on me. I'm creating a situation there with touch interaction. So I'm not surprised I'm breaking it. But before updating to 1.3.2 it was doing that jittery move/scroll all the time.

I would love to be able to have text that always editable, but even without this issue, there are ux issues with that. I'm trying to do too many things at once. I think I may need to add some kind of mode switch somewhere where I turn off dragging and allow editing.

https://www.dropbox.com/s/32vt51k88xsctge/dragtest_interactjs_132.mov?dl=0

[crawld]

Any updates on this? I can confirm it still occurs with 1.3.3, iOS 11.3.

[cgh20xx]

interact.js 1.3.3, iOS 11.3. still not work, too.

[cooperfellows]

I am seeing similar issues using version 1.3.3 on iPhones running recent iOS installs (11+) but on older hardware. So far I've confirmed this type of problem on a 5S and a 6S. New models do not appear to be impacted.

I'm happy to provide as much debug data as you need, you can see the issue in production on the following site by interacting with any of the puzzles there:

• https://playstaging.champlain.edu

[brianmcculloh]

I'm having this issue with 1.3.3 on both my site and the demo. Any word on when this will be fixed? I don't see this being addressed in either the Done, In Progress, or Backlog tabs for 1.4. The touch-action:none method does not fix this issue. It is only present on actual touch devices, not emulated screens or in BrowserStack. I have checked on an iPhone 6 and iPhone X in both Chrome and Safari.

[crawld]

By setting options.passive = false for addEventListener(), it was fixed for my sites.

[cooperfellows]

@crawld What devices are you testing on?

I've made this same change in the version of interact.js I am using, but the issue still seems to remain.

[crawld]

@cooperfellows I tested on ipad pro. I'll try to borrow someone's iphone to test.

[cooperfellows]

Thanks @crawld, the newer iPads haven't shown me any problems, it's only older models (seems to be iPhone6S or less). My iPad air (Model A1474) works fine.

…

On Wed, Apr 25, 2018 at 7:08 PM crawld ***@***.***> wrote: @cooperfellows <https://github.com/cooperfellows> I tested on ipad pro. I'll try to borrow someone's iphone to test. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#561 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGe8zZ_ZAhr7OizsS-IIFNJOKhKZUqqgks5tsQH-gaJpZM4QuXry> .

[brianmcculloh]

Thanks @crawld that looks like it will probably fix it for me, I'm just having trouble adding it to my interact.js file so I can try it out. I'm on 1.3.3 and I tried adding it in but am getting errors. Should I just wait for the next release of interact, or is there a chance this will not be in that release?

[brianmcculloh]

Never mind @crawld I was able to get it implemented and it did indeed fix the issue. Thanks a ton!

[mcdemarco]

Recent comments on this issue seem to be about the iOS 11.3 passive event issue and not about the original bug. The downgrade (to 1.28) that fixed the original bug for me does not fix the newer iOS 11.3 issue, but @crawld's changes do (without reintroducing the original bug, though with a new issue involving redragging previously dragged elements). So while the issues may be related they are not the same bug.

[MohammadShanaah]

Hi @brianmcculloh,
Can you tell me where you placed the code of @crawld provided?

[brianmcculloh]

@MohammadShanaah I added the code to the add() function just as is shown here and then the difference was that I had to add the browser var at the top of the module like so:
var browser = require('./browser');
Finally, I had to include the browser library in the list at the end of the module so that line became:
},{"./browser":36,"./arr":35,"./domUtils":39,"./is":46,"./pointerExtend":48,"./pointerUtils":49,"./window":52}],41:[function(require,module,exports){

[MohammadShanaah]

Thank you @brianmcculloh for your answer.
I made it work using touch-action: none as @taye posted earlier.

[timhorwood]

If I am just including interact.js into my page how would I go about fixing this? Also experiencing this with 1.3.3. Thanks

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

[MohammadShanaah]

Thanks @taye v1.4 works awesome!!

[taye]

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

[timhorwood]

Thanks, what you suggested worked perfectly