How to fix ion-slides deformed width on ios?

Sometimes ion-slides on iOS are deformed (ion-slide have wrong width and is overflowed).

Setting width: 100% !important and overflow: hidden fix the problem partially but brings up a new bug which is the white space to death screen after the last slide.

Using the slides.update() function doesn't fix the problem (ionic 3).

How to solve this issue?

My ion-slides were hardcoded in the HTML page.

So, I had packed the slides data into an array in the ts file and looped the ion-slide tag using *ngFor with 1s delay after the ionViewWillLoad() had fired.

TS code:

 ...
 slides = null;
 ...

 ionViewWillEnter() {
    setTimeout(() => {
      this.slides = [
        {
          imgSrc: "...",
          header: "...",
          text: "...",
          action: "skip"
        },
        {
          imgSrc: "...",
          header: "...",
          text: "...",
          action: "skip"
        },
        {
          imgSrc: "...",
          header: "...",
          text: "...",
          action: "skip"
        }
      ]
    }, 1000);
  }

HTML code:

  <ion-slides *ngIf="slides" pager>
    <ion-slide *ngFor="let slide of slides">
      <img [src]="slide.imgSrc" class="slide-image" />
      <h2 class="text-heading">{{ slide.header }}</h2>
      <p class="text-light" text-capitalize [innerHTML]="slide.text"></p>
      <span (click)="goToMenu()" class="text-light" text-capitalize>{{ slide.action }}</span>
    </ion-slide>
  </ion-slides>