Delay beta 3

Ionic Framework ionic-v3
1

I have a project with alpha42 and im trying to create a new with beta3, but i have a page with 40 cards, and with my beta3 project when i scroll down these cards it get really laggy, and it dont happen in my alpha42 project.

Anyone have any idea why is that happening?

2

Anyone know if it is a known issue?

3

Could you paste the markup for these cards? Also, where are you seeing the lag? Chrome, Safari, iOS, etc.?

4

@brandyshea
I’m seeing the lag in my android device (Moto X 2nd), in the chrome it works perfect.
And one more thing, if i code these cards hardcoded without the ngFor the lag don’t happen, i mean, if i copy and paste 30-50 cards.

HTML:

<ion-content>

  <ion-card *ngFor="#monster of monsters">

    <ion-row class="monster-stats">
      <ion-col width-20>
        <h6>HP: </h6>
        <h6>ATK: </h6>
        <h6>DEF: </h6>
        <h6>SPD: </h6>
      </ion-col>
      <ion-col width-30>
        <h6>CRI Rate: </h6>
        <h6>CRI Damage: </h6>
        <h6>Resistence: </h6>
        <h6>Accuracy: </h6>
      </ion-col>
    </ion-row>

  </ion-card>

</ion-content>

JS:

import {Page, NavController, NavParams, Platform} from "ionic-angular";

@Page({
  templateUrl: "build/pages/monsters/monsters.html"
})

export class Monsters {
  platform: Platform;

  monsters: any;

  constructor(platform: Platform) {
    this.platform = platform;
    this.monsters = [];

    for (let i = 0; i < 50; i++) {
      this.monsters.push("");
    }
  }
}

Thanks

5

Is this not an Angular performance thing when rendering many elements? Maybe wait for the Virtual List feature coming in beta 4?

6

I don’t think it is a angular performance, because both my alpha42 and beta3 uses angular 2.0.0-beta.6, and the lag only happens in the beta3 project.

7

Anyone else have this performance issue?