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.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. 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.