Virtual Scroll not render properly randomly

I’m using Ionic 5 + Capacitor.
Facing the virtual scroll not rendering properly randomly, and it happens after page refresh.
It could back to normal if I apply any view changes to the list, eg change segmentation / search with new keyword.
Refresh the page will solve the issue as well.

Scenario 1
After page refresh, the whole virtual scroll list was disappear.

Scenario 2
After page refresh the virtual scroll list showing the first half item vertically.



   Ionic CLI                     : 6.11.1 (/Users/nelsonmui/.nvm/versions/node/v12.16.1/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.2.2
   @angular-devkit/build-angular : 0.901.9
   @angular-devkit/schematics    : 9.1.9
   @angular/cli                  : 9.1.9
   @ionic/angular-toolkit        : 2.2.0


   Capacitor CLI   : 2.2.0
   @capacitor/core : 2.4.0


   cordova-res : 0.15.1
   native-run  : 1.0.0


   NodeJS : v12.16.1 (/Users/nelsonmui/.nvm/versions/node/v12.16.1/bin/node)
   npm    : 6.14.7
   OS     : macOS Catalina

Below is my coding:

<ion-list lines="none" class="ion-no-padding" *ngIf="eventList && eventList.length">
    <ion-virtual-scroll [items]="eventList" approxItemHeight="166px">
      <div *virtualItem="let event; let i = index;">
          <ion-item-sliding *ngIf="event && event.eventId" #slidingItem>
            <ion-item class="ion-item-no-padding" (click)="loginEvent(event.eventId)" lines="none">
              <ion-grid class="full-width">
                <ion-row class="ion-no-padding" class="ion-align-items-center">
                  <ion-col class="ion-text-center ion-align-items-center ion-no-margin" size-xs="4" size-sm="3" size-md="2" >
                    <ion-card class="ion-text-center countdown-card">
                      <ion-text color="dark" *ngIf="event.countDown > 0">
                        <div><ion-text class="font-bold font-16">{{ event.countDown }}</ion-text></div>
                        <div><ion-text class="font-10 ion-text-uppercase">{{ 'EVENT_LIST.msg.days' | translate }}</ion-text></div>
                      <ion-text color="dark" class="font-semi font-12 ion-text-uppercase" *ngIf="event.countDown < 0">
                        {{ 'EVENT_LIST.msg.expired' | translate }}
                      <ion-text color="dark" class="font-semi font-12 ion-text-uppercase" *ngIf="event.countDown == 0">
                        {{ '' | translate }}
                  <ion-col size-xs="8" size-sm="9" size-md="10">
                    <div class="ion-margin-vertical line-120">
                      <ion-label class="font-15 font-bold line-200" *ngIf="event.title">
                        {{ event.title }}
                      <ion-label class="font-12" *ngIf="event.time && event.time.seconds && event.timezone && event.timezone.utc">
                        <ion-icon class="icon-small" src="./assets/img/icon/calendar.svg"></ion-icon>
                        {{ event.time.seconds * 1000 | date : 'dd MMM yyyy, EEEE' : 'UTC' + event.timezone.utc }}
                      <ion-label class="font-12" *ngIf="event.time && event.time.seconds && event.timezone && event.timezone.utc">
                        <ion-icon class="icon-small" src="./assets/img/icon/clock.svg"></ion-icon>
                        {{ event.time.seconds * 1000 | date : 'h:mm a' : 'UTC' + event.timezone.utc }} &nbsp;<span class="font-10">(UTC{{ event.timezone.utc }})</span>
                      <ion-label class="font-12" *ngIf="event.role && event.role.type">
                        <ion-icon class="icon-small" src="./assets/img/icon/profile.svg"></ion-icon>&nbsp;
                        <ng-container *ngIf="event.role.custom">{{ event.role.type }}</ng-container>
                        <ng-container *ngIf="!event.role.custom">{{ 'GENERAL.list.role.' + event.role.type | translate }}</ng-container>
                        <ng-container *ngIf="event.owner">&nbsp;({{ 'GENERAL.list.role.owner' | translate }})</ng-container>
                      <ion-label class="font-12">
                          <ng-container *ngIf="event.package.type === 'trial'">
                            <ion-icon class="icon-small" src="./assets/img/icon/star.svg"></ion-icon>
                            <span class="font-semi">{{ 'GENERAL.label.trial' | translate }}</span>
                            <ng-container *ngIf="event.trial_countDown">
                              <ng-container *ngIf="event.trial_countDown > 1"> ( Expire in {{ event.trial_countDown}} days )</ng-container>
                              <ng-container *ngIf="event.trial_countDown == 1"> ( Expire in {{ event.trial_countDown}} day )</ng-container>
                              <ng-container *ngIf="event.trial_countDown == 0"> ( Expire by today )</ng-container>
                              <ng-container *ngIf="event.trial_countDown < 0"> ( Expired )</ng-container>
                          <ng-container *ngIf="event.package.type !== 'trial'">
                            <ion-icon class="icon-small" src="./assets/img/icon/crown.svg"></ion-icon>
                            <span class="font-semi">{{ 'GENERAL.label.premium' | translate }}</span>
            <ion-item-options side="end" (ionSwipe)="checkActionSwipe(event)">
              <ion-item-option color="danger" (click)="deleteEvent(event)" *ngIf="!event.owner && !event.role.hostId"><ion-icon name="trash-outline"></ion-icon></ion-item-option>

I have the same problem.
when i enter a page with VS i see it sometimes well or sometimes squashed with records one on top of the other.
If I move to another page and then go back the VS disappears.
By inspecting the html code, the elements are on the page but not visible