bug: ion-slides regression in modals (unusable after 4.11.0)

Bug Report

Ionic version:

4.11.0

Current behavior: ion-slides now behaves strangely when placed in modals after v4.11.0, touch events aren’t correctly handled and scrolling is not working, as well as layout is stretched with incorrect dimensions calculation.

v4.10.3 is working correctly.

Expected behavior: It should work as before

Steps to reproduce: Put an ion-slides with 2 or 3 photos in a modal page and present it, try to drag left or right, you will get stuck between photos.

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.2 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.11.0
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.2, (and 12 other plugins)

Utility:

   cordova-res : 0.6.0 (update available: 0.8.0)
   native-run  : 0.2.8 

System:

   Android SDK Tools : 26.1.1 (/Users/omardoma/Library/Android/sdk)
   ios-deploy        : 1.9.4
   ios-sim           : 8.0.2
   NodeJS            : v10.16.3 (/usr/local/Cellar/node@10/10.16.3/bin/node)
   npm               : 6.9.0
   OS                : macOS Mojave
   Xcode             : Xcode 11.1 Build version 11A1027

[FranzSw]

Would love to hear some news on this.

@NikolaDeveloper Here’s a one line fix / workaround for React:

// ...
<IonSlides onIonSlidesDidLoad={function(this: any){this.update()}}>
//...

It basically just calls update on IonSlides after loading. It’s nice because it doesn’t need any ref or additional variable.

[SimonGolms]

One thing to note is that the bug can be fixed whenever it occurs by simply triggering a window resize

Good hint. I was able to fix it with the following exemplary workaround for my use case.

// slides-modal.component.html
...
<ion-content>
  <ion-slides #sliderRef>
    <ion-slide>
       ...
    </ion-slide>
  </ion-slides>
</ion-content>
...

// slides-modal.component.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { ModalController, IonSlides } from '@ionic/angular';

@Component({
  selector: 'app-slides-modal',
  templateUrl: './slides-modal.component.html',
  styleUrls: ['./slides-modal.component.scss']
})
export class SlidesModalComponent implements OnInit {

  @ViewChild('sliderRef', { static: true }) protected slides: IonSlides;

  constructor(private modalController: ModalController) {}

  ngOnInit() {
    this.slides.update();
  }
}

Edit: In case this workaround don’t work, check this one.