Ion slides width takes full screen width on second visit to page that has the slides

[ReaperTech]

Bug Report

Ionic version:

[ ] 4.x [x] 5.3.0

Current behavior: On first visit to page that has slides, the slides are the correct width as per "slides per page". If I navigate away and come back each slide takes the full screen width. The slides are also very slow to load, taking as much as 5 seconds. I am using saved icons in the slides so it is not the images in the slides causing the lag. BUT THE MAIN ISSUE IS THE WIDTH. I have just updated from ionic 4.4.0 and there were no problems, and I have not changed any code relating to the slides.

Expected behavior: the slides should be the correct width as per "slides per page"

Steps to reproduce: Steps as described above.

Related code:

@ViewChild('slides', { static: true }) slides: any;

   sliderOptions = {
    zoom: false,
    slidesPerView: 6,
    initialSlide: 2,
    centeredSlides: true,
    spaceBetween: 6
  };

<ion-slides [options]="sliderOptions" #slides style="background-color: var(--ion-color-medium-tint)">
    <ion-slide *ngFor="let pathStep of pathStepsArray; let i = index">
      <ion-grid class="ion-no-padding">
        .....
      </ion-grid>
    </ion-slide>
  </ion-slides>

Other information: Turning off ivy by adding following to tsconfig.app.json and running ionic serve doesn't help. Is this issue related to this other (resolved) bug: https://github.com/ionic-team/ionic-framework/issues/20356

"angularCompilerOptions": {
    "enableIvy": false
  }

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.7.1 (C:\Users\xxx\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 5.3.0
   @angular-devkit/build-angular : 0.901.12
   @angular-devkit/schematics    : 9.1.12
   @angular/cli                  : 9.1.12
   @ionic/angular-toolkit        : 2.0.0

Capacitor:

   capacitor (Capacitor CLI) : not installed
   @capacitor/core           : not installed

Cordova:

   cordova (Cordova CLI) : 8.1.1 (cordova-lib@8.1.0)
   Cordova Platforms     : none
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.1.4, (and 11 other plugins)

System:

   Android SDK Tools : 26.1.1 (C:\Users\xxx\AppData\Local\Android\sdk)
   NodeJS            : v12.16.3 (C:\Program Files\nodejs\node.exe)
   npm               : 6.13.4
   OS                : Windows 10

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please provide a reproduction with the minimum amount of code required to reproduce the issue. Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

For a guide on how to create a good reproduction, see our Contributing Guide.

[ReaperTech]

This sounds like a related bug which was resolved? https://github.com/ionic-team/ionic-framework/issues/20356

[ReaperTech]

I have tried and failed to reproduce this bug in a new project. Please can you look at it and see if you can see anything that could be causing the issue?

[liamdebeasi]

ion-slides is powered by Swiper, a third party library that Ionic Framework does not manage, so it is hard for me to investigate this issue without a full code reproduction. Did you try to reproduce the issue in a blank Ionic starter application?

[ReaperTech]

ion-slides is powered by Swiper, a third party library that Ionic Framework does not manage, so it is hard for me to investigate this issue without a full code reproduction. Did you try to reproduce the issue in a blank Ionic starter application?

Yes it was blank but I added the relevant packages. I looked through previous bugs and found this one is similar in nature https://github.com/ionic-team/ionic-framework/issues/20356 ie the slider only works once because swiper doesn't get reinitialized. There is some incompatibility issue between swiper and ionic 5.3.0. I'm sure other users will experience the same issue at some point.

[liamdebeasi]

Yes, that issue was fixed several versions ago. It looks like you are using Ionic Framework v5.3.0, so you already have that fix.

Unfortunately, I cannot fix the issue without being able to reproduce it on my end. If you can find a way to reproduce the issue in a GitHub repo that would be great, otherwise I am going to have to close this issue. Thanks!

[ReaperTech]

Yes, that issue was fixed several versions ago. It looks like you are using Ionic Framework v5.3.0, so you already have that fix.

Unfortunately, I cannot fix the issue without being able to reproduce it on my end. If you can find a way to reproduce the issue in a GitHub repo that would be great, otherwise I am going to have to close this issue. Thanks!

I will try again to reproduce

[ReaperTech]

The workaround in this bug report https://github.com/ionic-team/ionic-framework/issues/20356 (postpone the slider initialization with ngIf and the angular lifecycle) works to make the slides the correct width again, but there is still a performance issue of the slides taking between 3 and 5 seconds to appear. Turning off ivy does not help with either issue.

[ReaperTech]

The solution is to npm install ngx-swiper-wrapper --save and use that for PWA. See documentation here https://www.npmjs.com/package/ngx-swiper-wrapper and here https://github.com/zefoy/ngx-swiper-wrapper#readme. The correct import for the css is @import '~swiper/css/swiper.min.css';

Ion-slides not working

[liamdebeasi]

Hi there,

I am going to close this issue as I am unable to reproduce the issue you are describing. If you are able to provide a GitHub repo that showcases the issue, please feel free to create a new bug report. Thanks!