Swiper: Incorrect horizontal scroll behaviour when using Swiper

[nortonandreev]

This is a (multiple allowed):

• [x] bug
• [ ] enhancement
• [ ] feature-discussion (RFC)

• Swiper Version: Swiper 5.3.6
• Platform/Target and Browser Versions: iOS
• Live Link or JSFiddle/Codepen or website with isssue: https://www.nortonandreev.com

What you did

I have a horizontal scroll bar for my navigation on my website. When scrolling on iOS (I have tried multiple browsers), there is an awkward glitch, which usually happens when you scroll to the end of the menu. Yesterday I did some experimenting and it seems to be happening only when Touch Start Event is dispatched and handled by Swiper. I have tried the following things:

1) I have tried disabling Swiper, which fixed the issue.
2) I have tried disabling Turbolinks, which sometimes causes issues with JavaScript, and this didn't fix the issue.
3) I tracked which function is being called, when 'touchstarted' fires and it seems to be "dummyEvenListener" on line 3450. I removed that, as long as attaching the event listener on line 3485, which fixed the issue. I am not sure 1) why this dummy event listener is needed in the first place and 2) why this is effecting the scroll behaviour.
4) The navigation bar is sticky positioned, so, even if what I tried in 2) seems to has fixed the issue, the same problem occurs if there is a swiper container below the current position of the menu.
5) I tried playing with the touchEventsTarget, passiveListeners and other Swiper settings, none of which has fixed the issue. It is still unclear to me why the touch event is firing when clicking on non-Swiper content and, even if it does, I don't understand why is this effecting the scrolling.

Based on everything I have tried, I still can't figure out why I am seeing this behaviour. I am not sure if it is Swiper issue, however, as I have tried with multiple browsers over multiple iOS releases, and I have confirmed it's not Turbolinks, I can't come up with an idea what the cause of the problem might be.

I have attached zip file with 3 videos which show the unexpected behaviour, so it can become clear what I am talking about:

• Default shows the current behaviour, which is also accessible on the website (https://www.nortonandreev.com)
• DummyHandlerDeleted shows the behaviour of the scrolling with the DummyEventHandler deleted
• DummyHandlerDeleted-SwiperContentBelowNavigation shows the behaviour of scrolling without and with Swiper content below the navigation bar

Expected Behavior

Horizontal scrolling should be smooth and scrolling as expected.

Actual Behavior

Horizontal scrolling is glitchy when 'touchstarted' event is fired.

Swiper.zip

[tiadaguru]

I can confirm the same bug in my own site & Swiper element: overscrolling to the left end or right end (i.e., no loop) causes the swiper element to bounce rapidly twice.

iOS 13.4 / Safari (iPhone 6S Plus)
Swiper 5.3.6 (default JS & CSS)

I am not using Turbolinks on my environment (the environ. is unfortunately not public). Likewise, I definitely see the bug on your public link here on my iOS device.

[nortonandreev]

I can confirm the same bug in my own site & Swiper element: overscrolling to the left end or right end (i.e., no loop) causes the swiper element to bounce rapidly twice.

iOS 13.4 / Safari (iPhone 6S Plus)
Swiper 5.3.6 (default JS & CSS)

I am not using Turbolinks on my environment (the environ. is unfortunately not public). Likewise, I definitely see the bug on your public link here on my iOS device.

Ye, what is worse that it happens on non-swiper elements as well. I hope there will be some workaround for that or a fix coming soon, otherwise I will have to look for alternatives and I’ve already spent time tweaking swiper to fit my needs, don’t really want to start over with another library.

[wuhuoshao]

Have you solved the problem? How did you do it

[wuhuoshao]

I can confirm the same bug in my own site & Swiper element: overscrolling to the left end or right end (i.e., no loop) causes the swiper element to bounce rapidly twice.
iOS 13.4 / Safari (iPhone 6S Plus)
Swiper 5.3.6 (default JS & CSS)
I am not using Turbolinks on my environment (the environ. is unfortunately not public). Likewise, I definitely see the bug on your public link here on my iOS device.

Ye, what is worse that it happens on non-swiper elements as well. I hope there will be some workaround for that or a fix coming soon, otherwise I will have to look for alternatives and I’ve already spent time tweaking swiper to fit my needs, don’t really want to start over with another library.

Have you solved the problem? How did you do it

[wuhuoshao]

I can confirm the same bug in my own site & Swiper element: overscrolling to the left end or right end (i.e., no loop) causes the swiper element to bounce rapidly twice.

iOS 13.4 / Safari (iPhone 6S Plus)
Swiper 5.3.6 (default JS & CSS)

I am not using Turbolinks on my environment (the environ. is unfortunately not public). Likewise, I definitely see the bug on your public link here on my iOS device.

Have you solved the problem? How did you do it

[vukhacbiet]

Confirm this bug, i hope it will be fixed soon

[tiadaguru]

No, I've not been able to solve this issue, unfortunately. I do not think we have made any configuration errors, either, so I'm leaning towards a bug.

[nortonandreev]

Thanks for trying to address the issue. Unfortunately, it does not seem to be fixed (in my case, at least). I am not using free mode, and it seems that the fix applies only to that. @nolimits4web

[creativeankitb]

Anyone got this how this resolve fro Iphone x in Free mode bounce rapidly twice if we swipe.

[creativeankitb]

swiper element to bounce rapidly twice

Have you got the solution for this issue?

[creativeankitb]

Confirm this bug, i hope it will be fixed soon

There is problem with Iphone X and XS with swiping in free mode this was swiper element to bounce rapidly twice if we swipe.

[nortonandreev]

swiper element to bounce rapidly twice

Have you got the solution for this issue?

It seems to be a WebKit issue. Unfortunately, I still can’t find a workaround for the issue.

[creativeankitb]

swiper element to bounce rapidly twice

Have you got the solution for this issue?

It seems to be a WebKit issue. Unfortunately, I still can’t find a workaround for the issue.

Ok man thank you, If you got that please revert here so will see that the solution.