Ion-slide slow to render when adding many slides in ionic-v4

Hi peoples!

I’m having terrible performance issues in ionic-v4 with the ion-slide element when adding many slides all at once. I have this same bit of code in ionic-v3 and it works seamlessly which is why I’m quite confused. Consider the code below:

  <ion-slides [options]="sliderConfig" pager="false">
    <ion-slide *ngFor="let item of displayedSlides">
        {{ }} {{ item.title}}
  <button (click)="setShortSlides()">Short Slides</button>
  <button (click)="setLongSlides()">Long Slides</button>


  sliderConfig = {
    slidesPerView: 1,
    spaceBetween: 10,
    centeredSlides: true
  displayedSlides: SlidesObject[] = [];
  longSlides: SlidesObject[] = [];
  shortSlides: SlidesObject[] = [];

  ionViewDidLoad() {
    for (let i = 0; i < 122; i++){
        id: i,
        title: 'long title ' + i
    for (let i = 0; i < 12; i++){
        id: i,
        title: 'short title ' + i
    this.displayedSlides = this.longSlides;

  setLongSlides(): void {
    this.displayedSlides = this.longSlides;

  setShortSlides(): void {
    this.displayedSlides = this.shortSlides;

In ionic-v3 whenever you switch from the long list to the short list or visa versa the performance appears to be the same. However in ionic-v4 whenever I change from the long list to the short list the application updates without any issues. But when you change from the short to the long list the application hangs for a brief but noticeable amount of time, like a 1-2 seconds.

I’ve removed the ion-slide element and just used a div and the performance goes back to quick as expected but of course I then lack some of the functionality of the ion-slide.

Am I just totally misusing the element or is this maybe a bug?
Thanks in advance for any assistance!

I am also having v3 to v4 migration speed issues tied to ion-slide!

Ionic team - Why is there a performance decrease from v3 to v4, and how can we fix it?


Same issue here! I tried to set changeDetectionStrategy to ‘OnPush’ but still, rendering components with just 11 slides (each slide with just one character on it) is very slow: 400+ ms. If I put some useful content on them it takes 1400ms+, with all my desired content 4000+ ms.
My first idea was that the lag is caused by some undesired DOM reflow/repaints while creating the slides, but then I checked the performance tab on Chrome: the rendering time is taken by js scripting, not UI reflows/repaints.

hey. I’m facing same issue. Did you manage to solve the slow rendering?

Yep! It seems that the newest ionic versions (I am on Ionic v5.2.7 now) do not have this issue, or at least not so bad anymore. Now my slides render in ~1400 ms with relatively much content on it. (much better than the previous 4000+ ms.)