swipeable does not behave as expected on mobile device with touch input

[rutech-rmi]

When swiping with a touch device, instead of swiping the element, the entire viewport is being swiped.

It might be the same issue as with #242

[vnphanquang]

@riveruniversity thanks for reporting. I'll look into it soon, sorry for the inconvenience

[vnphanquang]

@riveruniversity can you try specifying touch-action for your elements, i.e touch-action: none via CSS, or touch-none if you are using Tailwind? Depending on your use case you may find different values of touch-action more "graceful" than others.

I could add that automatically via the lib as with movable but i've found that it's best to leave that to be specified in user land so the intention is clear and can be customized more easily.

Let me know if that helps your use case. I might add a section in the docs about this.

[rutech-rmi]

@vnphanquang thank you for you prompt response.
I have added touch-none as suggested. The swipe actions are triggering now, but the elements are not shifting on the x-axis.
Any suggestions?

[vnphanquang]

@riveruniversity would love to help but it'll be nice if you can create some minimal reproduction of what you're trying to work on. @svelte-put/swipeable is just part of the equation so make sure you have the other stuff set up correctly, especially -swipe-distance-x:

<your-element-to-shift
  use:swipeable
  onswipestart={swipestart}
  onswipeend={swipeend}
  style:left="var(--swipe-distance-x)"
></your-element-to-shift>

Here's a Svelte REPL version of the demo seen in the docs page (make sure you toggle Tailwind mode in the settings of the REPL). Let me know.

[rutech-rmi]

I replicated the table component I am currently working on. Here is the REPL version.

[vnphanquang]

Thanks, appreciate it. I took a quick look and yeah on desktop all is well but on mobile the row indeed isn't able to move. Will investigate when I can find time. Sorry again about the inconvenience.

[rutech-rmi]

Not a problem at all. I'm very grateful for what you're doing. Thank you.

[vnphanquang]

@riveruniversity you can add **:touch-none to <tr> where swipeable is used. That'll fix the issue.

There is some touch event in the child content that interferes with swipeable, but I don't know exactly what (seems to be touch events on table-row and table-cell). Will do some more research to figure out the root cause.

[rutech-rmi]

The swipe functionality works seamlessly on my iPhone as long as I remain on the x-axis. However, the moment I introduce movement along the y-axis, the swiping halts abruptly without triggering the onswipeend event.