Monday, 14 June 2021

Page jumping during homepage scrolling with SWIPER on mobile android

I use swiper in my angular homepage and during its scrolling with finger (on mobile) the page jump or bounce a little. It happens when I put away the finger after scrolling. I checked that it happen only when swiper is enabled and the same effect occurs in an empty angular application with no special styles. Also it`s hard to debug because I noticed no events in swiper during page scrolling. The .ts code is as follow:

import SwiperCore, { Navigation, Pagination, Autoplay } from 'swiper/core';

SwiperCore.use([Navigation, Pagination, Autoplay]);

.html

 <swiper [slidesPerView]="1" [spaceBetween]="30" [loop]="true" [navigation]="true" [pagination]="{clickable: true}"
        [autoHeight]="true" [autoplay]="{
            delay: 4500,
            disableOnInteraction: true
          }" class="mySwiper ">
 <ng-template swiperSlide>
...
 </ng-template>
 <ng-template swiperSlide>
...
 </ng-template>
 <ng-template swiperSlide>
...
 </ng-template>
</swiper>

.scss:

@import "~swiper/swiper";
@import "~swiper/components/navigation/navigation";
@import "~swiper/components/pagination/pagination";

.mySwiper{
    padding-bottom: 2rem;
}
.swiper-container {
    width: 100%;
    z-index:0;
  }
  
  .swiper-slide {
    text-align: center;
    font-size: 18px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  
  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

The problem occurs only on mobile (I checked only on smartphones with android). Browsers I checked: chrome and opera. How to avoid page jumping while scrolling using swiperjs? Codesanbox demo

Similar problem on SO



from Page jumping during homepage scrolling with SWIPER on mobile android

No comments:

Post a Comment