Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

drag objects on page scrolls mobile page #561

Closed
mrtwebdesign opened this issue Nov 29, 2017 · 25 comments

Comments

@mrtwebdesign
Copy link

@mrtwebdesign mrtwebdesign commented Nov 29, 2017

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

This comment has been minimized.

Copy link
Owner

@taye taye commented Dec 6, 2017

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

@mrtwebdesign

This comment has been minimized.

Copy link
Author

@mrtwebdesign mrtwebdesign commented Dec 6, 2017

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

This comment has been minimized.

Copy link

@mcdemarco mcdemarco commented Dec 11, 2017

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

This comment has been minimized.

Copy link
Author

@mrtwebdesign mrtwebdesign commented Dec 12, 2017

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

taye added a commit that referenced this issue Dec 13, 2017
@taye taye closed this in c05a05c Dec 14, 2017
@steveHornseyDeveloper

This comment has been minimized.

Copy link

@steveHornseyDeveloper steveHornseyDeveloper commented Dec 15, 2017

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

This comment has been minimized.

Copy link
Author

@mrtwebdesign mrtwebdesign commented Dec 16, 2017

@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

This comment has been minimized.

Copy link

@crawld crawld commented Apr 5, 2018

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

@cgh20xx

This comment has been minimized.

Copy link

@cgh20xx cgh20xx commented Apr 10, 2018

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

@cooperfellows

This comment has been minimized.

Copy link

@cooperfellows cooperfellows commented Apr 19, 2018

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:

@brianmcculloh

This comment has been minimized.

Copy link

@brianmcculloh brianmcculloh commented Apr 24, 2018

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 added a commit to crawld/interact.js that referenced this issue Apr 25, 2018
@crawld

This comment has been minimized.

Copy link

@crawld crawld commented Apr 25, 2018

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

@cooperfellows

This comment has been minimized.

Copy link

@cooperfellows cooperfellows commented Apr 25, 2018

@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

This comment has been minimized.

Copy link

@crawld crawld commented Apr 25, 2018

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

@cooperfellows

This comment has been minimized.

Copy link

@cooperfellows cooperfellows commented Apr 26, 2018

@brianmcculloh

This comment has been minimized.

Copy link

@brianmcculloh brianmcculloh commented Apr 30, 2018

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

This comment has been minimized.

Copy link

@brianmcculloh brianmcculloh commented Apr 30, 2018

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

@mcdemarco

This comment has been minimized.

Copy link

@mcdemarco mcdemarco commented May 1, 2018

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

This comment has been minimized.

Copy link

@MohammadShanaah MohammadShanaah commented May 3, 2018

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

@brianmcculloh

This comment has been minimized.

Copy link

@brianmcculloh brianmcculloh commented May 3, 2018

@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

This comment has been minimized.

Copy link

@MohammadShanaah MohammadShanaah commented May 7, 2018

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

@timhorwood

This comment has been minimized.

Copy link

@timhorwood timhorwood commented May 9, 2018

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

This comment has been minimized.

Copy link
Owner

@taye taye commented May 9, 2018

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

This comment has been minimized.

Copy link

@MohammadShanaah MohammadShanaah commented May 14, 2018

Thanks @taye v1.4 works awesome!!

@taye

This comment has been minimized.

Copy link
Owner

@taye taye commented May 15, 2018

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

@timhorwood

This comment has been minimized.

Copy link

@timhorwood timhorwood commented May 17, 2018

Thanks, what you suggested worked perfectly

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
10 participants
You can’t perform that action at this time.