How to fix ion-slides deformed width on ios?

Question

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?

score 1 · Accepted Answer · answered Feb 24 '21 at 14:05

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>

1

No need setTimeout is fine – funbox Nov 07 '22 at 06:47

How to fix ion-slides deformed width on ios?

1 Answers1