bug: ion-virtual-scroll is overlapping on slow network connection

[mrSingh007]

ion-virtual-scroll not rendering data correctly on slow network.
I tested with 3g network on chrome and the ion-virtual-scroll items gets overlapped.

This bug is related to #18409 but I created this ticket as this bug appears always on slow network.

e.g
home.page.html looks like

<ion-header>
  <ion-toolbar color="primary">
     Lorem
  </ion-toolbar>
</ion-header>
<ion-content *ngIf="(obser$| async) as testArray">
  <ion-virtual-scroll [items]="testArray" approxItemHeight="320px">
    <div *virtualItem="let item;">
    <app-demo [personTile]="item" ></app-demo>
    </div>
  </ion-virtual-scroll>
</ion-content>

and home.page.ts

export class HomePage {
  obser$: Obserable<Person[]>;
  constructor(private service: LoremService) {
    this.obser$ = this.service.getAllPersons();
  }

and app.demo.ts

export class AppDemoComponent {
  @Input()
  personTile: Person;

and app.demo.html

<ion-card>
 <ion-card-content>
    <ion-grid>
      <ion-row>
        <ion-col>
          {{personTile.name}}
        </ion-col>
          ....
       </ion-row>
    </ion-grid>
  </ion-card-content>
</ion-card>

Ionic version:
ionic cli : 5.4.15
"@angular/router": "~8.1.2",
"@capacitor/android": "^1.4.0",
"@capacitor/core": "1.4.0",
"@ionic-native/core": "^5.20.0",
"@ionic-native/splash-screen": "^5.20.0",
"@ionic-native/status-bar": "^5.20.0",
"@ionic/angular": "^4.11.10",

[liamdebeasi]

Thanks for the issue. Can you try this again on the latest version of Ionic Framework? If the issue still happens there, can you provide a repo with the code required to reproduce this issue?

[mrSingh007]

ok. I am creating stackblitz and will share soon

[mrSingh007]

@liamdebeasi
I have tested with latest version and problem is still there. I have added info to the bug.
(I am not able to provide live code example as on stackblitz ion-content is not showing texts https://stackblitz.com/edit/ionic-v4-rdzrx3 but same code example can be taken)

[mrSingh007]

I have found out anything after 'ion-virtual-scroll' tag won't render on slow network. Even normal Lorem text. (its displayed for a second and then goes away)

[liamdebeasi]

Thanks for the issue. I am going to close this as a duplicate of #18409. I was able to reproduce the issue regardless of network connection speed. ion-virtual-scroll does not make any network requests by default, so it may just be a matter of lazy loaded scripts loading in slowly.