V9: Erratic snapping when swiping diagonally

[aus70]

Check that this is really a bug

• I confirm

Reproduction link

https://codesandbox.io/s/nv1b8l

Bug description

in v9 - at least on iOS devices (tested on safari, firefox and chrome) - the snapping seems to break when I pull the page down and left, which is something that happens often (but not all the times) when swiping with the right-hand thumb. The same issue occurs when swiping diagonally down-right. When I stop the swipe, the slides do not snap into position, but 2 slides remain visible (see attached screenshot).

This issue does not occur in v8, which somehow does not allow to swipe diagonally, but only vertically or horizontally, depending on the initial swipe direction. To reproduce the issue, open the code sandbox link https://nv1b8l.csb.app on a mobile device.

Expected Behavior

The slides should always snap into place like they do in v8.

Actual Behavior

When swiping diagonally, the slides often do not snap into position, but 2 slides remain visible (see attached screenshot).

Swiper version

9.0.3

Platform/Target and Browser Versions

iOS 16.1.1, iPhone 13 mini, Safari, Firefox & Chrome

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• I'm willing to open a PR

[jaminm]

I believe I am experiencing the same thing when upgrading to v9. Mouse click scrolling is fine, but when you swipe left and right and put in more of a diagonal movement, it does not snap into place, it hangs and a lot of time just swipes half-way. This did not happen in v8 at all. It only occurs for touch and it seems to work a little better in Safari than Chrome, but definitely not the same as before.

[Denoder]

this seems to no happen when using css mode, but has a viewability glitch when swiping too fast in that mode.

[jaminm]

In my case it's Vue using the (Swiper Element) WebComponent technique as recommended in the docs for v9.

[KCTWLSK]

this seems to no happen when using css mode, but has a viewability glitch when swiping too fast in that mode.

I am experiencing exactly the same thing, and thanks for this little but priceless tip, it works way much better now 🙌

[edited]: I found this modification would result in side-effect in Desktop mode, as if your slide is flying in the middle of its way and you do a scrolling, it would just stop swiping and hang on that weird position permanently afterwards (to me it's exactly the same behavior as the listed issue on iOS device), seems like we definitely need to add some workaround to avoid all these at the time 🤯

[eeschiavo]

Same issue here

[digaus]

Same issue here :/

[ttristan]

Same issue after upgrading from 8.4.4 to 9.0.5.
We have horizontal swipers which also scroll the page vertically if a slide is swiped slightly diagonally. It was never ideal but now this breaks the positioning of the slides

Screen.Recording.2023-02-21.at.14.45.26.mov

Btw. is there way to lock the touchmove in place so that only the swiper is moving and not the page even if I happen to swipe a little diagonally?

[jaminm]

Slow dragging (not a swipe) does work even if it's diagonal, once it reaches the midpoint if you let go it will snap the correct way. It's quickly swiping (normal swipes) diagonally that cause it to hang like this. If you can get the swipe exactly horizontal it won't hang but if you swipe with any diagonal movement it hangs.

[Murk-404]

Haven't been able to find any work around to make it somewhat useable in v9. Seems like downgrading is the only option atm.https://user-images.githubusercontent.com/105297858/221382421-2b7396a8-5f24-49ba-936b-d6d33788e675.MOV

[digaus]

Still having this issue on my android device

:/

[mniedermics]

Same issue after upgrading from 8.4.4 to 9.0.5. We have horizontal swipers which also scroll the page vertically if a slide is swiped slightly diagonally. It was never ideal but now this breaks the positioning of the slides

Screen.Recording.2023-02-21.at.14.45.26.mov
Btw. is there way to lock the touchmove in place so that only the swiper is moving and not the page even if I happen to swipe a little diagonally?

Have you found a solution that only the swiper is moving?