[iOS, cssMode + virtual]: swiping gets stuck
Check that this is really a bug
- [X] I confirm
Reproduction link
https://codesandbox.io/s/vigilant-wiles-k3kskn?file=/src/App.js
Bug description
Hi, and thank you for this great library!
I'm working for a big streaming platform, which has several horizontal swipeable swimlanes with content. Currently, we're using https://github.com/akiran/react-slick but looking for an alternative as the react-slick library is somewhat outdated. We've made great progress with your library, but have got stuck at what we believe are bugs. We need virtualisation as the swimlanes have too much content to render. However, we've noticed that swiping on iOS is really laggy and especially Chrome on iOS has focus issues (making the body scroll vertically instead of swiping). I could create a separate issue for this if you wish. In order to solve this, we tried the cssMode=true configuration. We love the performance and behaviour of it. There is however, one critical bug that prevents us from using it.
Expected Behavior
On iOS Safari, you can swipe in a way that makes swiper get stuck in an infinite swiping state. It's a bit tricky to explain, but you kinda have to swipe the same direction a couple of times in a fast manner. When the content starts flickering, you stop swiping and the swiper instance basically keeps iterating content in a non-animated manner.
https://user-images.githubusercontent.com/719555/156165958-c5d90b64-c42d-489f-b5ff-1ce752abb11a.mov
Actual Behavior
We expect swiper to not get stuck in "infinite scrolling", no matter how much/fast you scroll. Some momentum buildup is expected, but not scrolling >10 items.
Swiper version
8.0.6
Platform/Target and Browser Versions
iOS Safari/Chrome
Validations
- [X] Follow our Code of Conduct
- [X] Read the docs.
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- [X] Make sure this is a Swiper issue and not a framework-specific issue
Would you like to open a PR for this bug?
- [X] I'm willing to open a PR
Update: The virtual flag disappear from the test case. I've added it again, and the issue should be easy to reproduce.
I am trying to figure out what is happening with this bug. I can confirm that this happens on mobile - safari + firefox + chrome.
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
the same problem + 1
+1
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
same problem on v10.0.4 +1
I am trying to figure out what is happening with this bug. I can confirm that this happens on mobile - safari + firefox + chrome. @rajibahmed @nolimits4web Have you found a solution to this? This seems like a crucial bug!
Issue is closed because of outdated/irrelevant/not actual/needed more information/inactivity.
If this issue is still actual and reproducible for latest version of Swiper, please create new issue and fill the issue template correctly:
- Clearly describe the issue including steps to reproduce when it is a bug.
- Make sure you fill in the earliest version that you know has the issue.
- Provide live link or JSFiddle/Codepen or website with issue