bug: Cards in a virtual scroll have a massive gap

Bug Report

Ionic version: [x] 4.x

Current behavior: Cards in a virtual scroll have a massive gap

Expected behavior: They should not have a massive gap (was working fine in 4.5.0) Steps to reproduce:

Related code:

 <ion-virtual-scroll [items]="filteredEvents" approxItemHeight="200px" [headerFn]="eventDaySplit" approxHeaderHeight="35px">
    <ion-item-divider *virtualHeader="let header">
      <ion-label>{{header | amDateFormat:'dddd DD MMMM'}}</ion-label>
    </ion-item-divider>
    <ion-card *virtualItem="let event; let itemBounds = bounds;">
      <ion-item [ngClass]="rightBorderClass(event.attending)" (click)="gotoViewEvent(event, event.attending)">
          <ion-label text-wrap>
          <ion-text color="primary" *ngIf="event.name">
            <h2>
              <span *ngIf="event?.group_details?.length==1">{{event.group_details[0].shortName}} | </span>
              <span *ngIf="event?.group_details?.length>1">{{event.group_details.length}} Groups | </span>
              {{event.name}}
            </h2>
          </ion-text>
          <ion-text color="primary" *ngIf="!event.name"><h2>No Event Name</h2></ion-text>
          <ion-text color="primary" *ngIf="event.type"><h2> {{event.type}} <span *ngIf="event.type=='Game' || event.type=='Final'">vs {{event.opponent}}</span></h2></ion-text>
          <p>
            {{event.startDatetime | amDateFormat:'HH:mm' }}<span *ngIf="event.endDatetime"> to {{event.endDatetime | amDateFormat:'HH:mm' }}</span>
          </p>
          <ion-text color="danger" *ngIf="event.cancelled"><h2><i>CANCELLED</i></h2></ion-text>
          <p id="location-text" *ngIf="event.location">{{event.location}}</p>
          <p id="location-text" *ngIf="event.address.readable">{{event.address?.readable}}</p>
        <p class="italic">
          {{event.private?'Private':'Public'}}
        </p>
        <p *ngIf="event.childInvited.length==1">Child Invited: {{event.childInvited.length}}</p>
        <p *ngIf="event.childInvited.length>1">Children Invited: {{event.childInvited.length}}</p>
          </ion-label>
          <ion-icon color="dark" name="lock" slot="end" *ngIf="event.cancelled || isInPast(event.startDatetime)"></ion-icon>
      </ion-item>
    </ion-card>
  </ion-virtual-scroll>

I’m filling in the filteredEvents object inside an observable server call.

EventService.call('event.getEvents', this.selectedOrganisation._id, this.activities.theDate.format(), this.profile.isAdmin).subscribe((events: any) => {
        this.events = this.dateSortPipe.transform(events);
        this.filteredEvents = this.applyFiltersToEvents(this.events);
        this.virtualScroll.checkEnd();
        this.presenters.dismissLoader();
        console.log('event sub list admin', this.events);
      });

Other information: https://forum.ionicframework.com/t/virtual-scroll-no-longer-working-correctly-after-upgrading-to-4-6/168560

Ionic info:

Ionic:

   Ionic CLI                     : 5.2.0 (/Users/admin/.npm-packages/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.6.0
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.0.0, ios 5.0.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 8 other plugins)

Utility:

   cordova-res : 0.3.0 (update available: 0.5.1)
   native-run  : not installed

System:

   Android SDK Tools : 26.1.1 (/Users/admin/Library/Android/sdk)
   ios-deploy        : 1.9.4
   ios-sim           : 8.0.1
   NodeJS            : v12.3.1 (/usr/local/Cellar/node/12.3.1/bin/node)
   npm               : 6.9.0
   OS                : macOS High Sierra
   Xcode             : Xcode 10.1 Build version 10B61

[brandyscarney]

Fixed by https://github.com/ionic-team/ionic/commit/3ef6ecf422dfd64158ed5332b1604a3b78613457, this will be in the next release, thank you!

[ionitron-bot[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.