nolimits4web / swiper

Most modern mobile touch slider with hardware accelerated transitions
https://swiperjs.com
MIT License
39.61k stars 9.75k forks source link

overflow-y: scroll on slide breaks sliding on mobile #7007

Closed codluca closed 1 year ago

codluca commented 1 year ago

Check that this is really a bug

Reproduction link

https://codesandbox.io/p/sandbox/swiper-default-8h4zgd

Bug description

Setting overflow-y: scroll on swiper-slide breaks sliding on mobile.

Expected Behavior

Setting overflow-y: scroll on swiper-slide should work properly on mobile, as in the browser.

Actual Behavior

My test is with an Angular Ionic project, but the issue is reproduced in the codesandbox also. In the browser, the slider works fine. In Chrome Developer Tools, using a mobile device, or if I deploy on Android, the sliding is broken. When I start to drag, the slide does not follow the movement, and sometimes the drag stops with the slide midway. If I log the touchStart, touchMove and touchEnd events, there are only a few touchMove events, and then a touchEnd, while the drag action is still in progress. If I put the overflow-y on the nested divs instead of on swiper-slide, the same thing happens.

This is the HTML:

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>Ionic Swiper</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <swiper-container loop="true">
    <swiper-slide>
      <div class="content">Slide 0</div>
    </swiper-slide>
    <swiper-slide>
      <div class="content">Slide 1</div>
    </swiper-slide>
    <swiper-slide>
      <div class="content">Slide 2</div>
    </swiper-slide>
  </swiper-container>
</ion-content>

This is the CSS:

swiper-container {
  width: 100%;
  height: 50%;
}

swiper-slide {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  overflow-y: scroll;
}

.content {
  display: flex;
  flex-shrink: 0;
  width: 100%;
  height: 150%;
  align-items: center;
  justify-content: center;
  background: cyan;
}

Swiper version

10.2.0

Platform/Target and Browser Versions

Chrome, Android

Validations

Would you like to open a PR for this bug?

nolimits4web commented 1 year ago

Use issues search