swiper icon indicating copy to clipboard operation
swiper copied to clipboard

[iOS, cssMode + virtual]: swiping gets stuck

Open wnr opened this issue 3 years ago • 3 comments

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

wnr avatar Mar 01 '22 12:03 wnr

Update: The virtual flag disappear from the test case. I've added it again, and the issue should be easy to reproduce.

wnr avatar Mar 02 '22 09:03 wnr

I am trying to figure out what is happening with this bug. I can confirm that this happens on mobile - safari + firefox + chrome.

rajibahmed avatar Mar 02 '22 16:03 rajibahmed

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.

stale[bot] avatar Sep 21 '22 04:09 stale[bot]

the same problem + 1

hxlniada avatar Oct 14 '22 11:10 hxlniada

+1

syug avatar Oct 23 '22 06:10 syug

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.

stale[bot] avatar May 21 '23 23:05 stale[bot]

same problem on v10.0.4 +1

iwillwen avatar Aug 01 '23 12:08 iwillwen

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!

szabolcsveer avatar Oct 20 '23 11:10 szabolcsveer

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

nolimits4web avatar Oct 24 '23 12:10 nolimits4web