bug: ion card flickering and data is incorrect while in infinite scroll

Bug Report

Ionic version: [x] Angular 4.3.1

Current behavior:

1. When cards are in an infinite scroll, all cards in the view have corders flicker from rounded to square.

2. Within an ion card, I have observables with async pipe that are presenting the wrong information for the given card. They show data from another card previously shown in the list.

Expected behavior: Cards shouldn’t flicker.

Data shown should match the respective item.

Steps to reproduce:

Cards in the custom component have the following subscriptions within them. <!-- <ion-card> ..... <ion-card-header *ngIf="let profile of profile$ | async"> ... -->

Related code:

<ion-virtual-scroll
  [items]="infinite$ | async"
  [itemHeight]="itemHeight"
  [trackBy]="trackByIdx"
>
  <div *virtualItem="let d">
    <!-- i.e. <ion-card> ..... <ion-card-header  *ngIf="let profile of profile$ | async"> ... -->
    <!-- nonetheless some custom component. here I propagate out to the parent component/page -->
    <ng-container *ngTemplateOutlet="child; context: { doc: d }"></ng-container>
  </div>
</ion-virtual-scroll>

[narhc8]

Having same issue with ion-virtual-scroll…it just wont stop flickering or stuttering

EDIT: found that using ion-card was the issue, as it was very buggy and kept flickering and moving farther down the viewport then expected. I switched to using ion-item and my problems were solved.

<ion-virtual-scroll [items]="searchableList"> <ion-item *virtualItem="let item" lines="none" (click)="buttonClick(item)" class="ion-item-border"> <ion-label text-wrap text-center class="card-title"> {{item.name}} </ion-label> </ion-item> </ion-virtual-scroll> you can also just create your own CSS variables to make it look like a card

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!