Why Did Ionic 4 Ion-Slides Suddenly Stop Displaying Properly?

Question

I have an Ionic 4 project that already had ionic slides implemented. Everything working great until some recent update to Ionic (less than a month ago) and they suddenly stopped working.

On the first load, they seem to be fine, but on any load after that:

• The pager doesn't work or show up
• The images don't size correctly
• Scrolling works but doesn't snap slides to the center like it should

First load works: image of ion-slides as intended

Second load does not: image of ion-slides broken

There are no error messages or warnings, and all the code below was working fine as of 1 month ago, no changes were made since. It just broke randomly.

HTML:

<ion-slides #slides pager="true">
  <ion-slide *ngFor="let option of options; let i = index">
    <ion-card mode="md" [ngStyle]="{'background': borderColors[i]}">
      <img style="object-fit: contain; border-radius: 20px; padding: 2px;" [src]="option.imageUrl">
    </ion-card>
  </ion-slide>
</ion-slides>

TS:

import { Component, Input, ViewChild } from "@angular/core";
import { IonSlides } from "@ionic/angular";
import { ContestOption } from "src/app/models/contest-model";

@Component({
  selector: "app-results-swiper",
  templateUrl: "./results-swiper.component.html",
  styleUrls: ["./results-swiper.component.scss"]
})
export class ResultsSwiperComponent {
  @Input() options = [
    { id: "null", imageUrl: "null", votes: 0 },
    { id: "null", imageUrl: "null", votes: 0 }
  ] as Array<ContestOption>;
  @Input() borderColors = [];

  @ViewChild("slides", null) slides: IonSlides;

  constructor() {}
}

I tried isolating the problem even further. This HTML still fails:

<ion-slides #slides pager="true" [options]="slidesOpts">
  <ion-slide>
    Hello
  </ion-slide>
  <ion-slide>
    Hello Again
  </ion-slide>
</ion-slides>

Just to reiterate, everything about this component was working not too long ago. Then I started seeing Ionic CSS deprecation warnings in my project in a recent update. They look like this:

[DEPRECATED][CSS] Ionic CSS attributes are deprecated.
Replace:
'<div text-center>'

With:
'<div class="ion-text-center">'

Since that update, the ion-slides broke and just decided to stop working. Please help!

Glaucoma

so slider in ionic 4 does require options object to be the one defining stuff like pager. Can you share your options object for the slider? – Helles

the slider still failed without options. In my on bug testing, turns out there was a different problem. I'll post the answer. – Glaucoma

Answer 1

Through more extensive bug testing, I found out that the problem was not with ion-slides, but actually with page loading. I didn't give enough information to solve the problem.

The ion-slides were opening in an Ionic modal, which was causing the slides to render before the page finished loading. The solution in my case was this:

1. Create a variable in TS file viewEntered = false;
2. Using the Ionic lifecycle hook, detect when the view finished entering

ionViewDidEnter() {
    this.viewEntered = true;
}

3. Using ngIf, detect on the ion slides if the view entered in HTML.

<my-custom-component *ngIf="viewEntered"></my-custom-component>

Glaucoma

You just saved my life. Thank you! – Carleton

Two lives saved! hahahah! Thank you! – Decorticate

you save my live tooo!! ill buy you a beer!! – Gangland

Five lives saved! This time in Vue.js lands. the mounted() hook was not enough in my case though, I had to add a 100ms timeout in there aswell =X – Pacifica

VueJS is also broken, as @KhaledOsman suggested, it works if hacky. – Glare

Fantastic, good job. Thank you very much, not easy to discover. – Jarnagin

I found ` ionViewWillEnter () { this.slider.update() }` Solved most of my issues (along with disabling loop). Ionic is fast to mockup but not fast to produce quality products with. – Gonad