Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Swiping to a slide with less content can cause scrolling to the bottom of the slide (and display blank screen) - ios only #7610

Open
5 of 6 tasks
glsanders opened this issue Jul 10, 2024 · 0 comments
Labels

Comments

@glsanders
Copy link

Check that this is really a bug

  • I confirm

Reproduction link

https://pattern.patternsites.com

Bug description

Note: the demo link is to a PWA generated from the same code base. If you open it on an ios device in Safari you can induce the behavior using the second method mentioned below.
On an Ionic / Vue iOS app, if you have scrolled to the bottom of a longer slide and swipe rapidly to a shorter slide the newly active slide will scroll to the bottom and result in the content of the shorter slide being hidden off the top of the screen.
This is a horizontal slide layout.
This behavior can be induced in 2 ways.

  1. Swipe rapidly to switch slides and hold your finger on the screen for a second at the end of the swipe.
  2. Swipe rapidly and at an upward angle.

I have added a function that uses scrollIntoView to scroll to the top of the slide after the slide change completes. I see that scroll to the top for a split second but then it jumps back to the bottom of the screen. It's interesting to note that the android apps and PWAs generated from the same code base do not behave this way.

Expected Behavior

The slide should switch and then scroll to the top.

Actual Behavior

The slide changes, scrolls to the top for a split second and then immediately jumps to the bottom and all content on the slide is hidden off the top of the screen.

Swiper version

10.2.0

Platform/Target and Browser Versions

iOS 17 , Ionic / Capacitor app.

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
@glsanders glsanders added the Vue label Jul 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant