bug: ion-virtual-scroll overlapping items

Bug Report

Ionic version: 4.4

Current behavior: When using a virtual scroll component containing items of varying height with an infinite scroll occasionally the height of some items is approxItemHeight instead of calculating the height which causes overlapping.

Expected behavior: It should be possible to have items of varying heights within a virtual scroll component when using infinite-scroll.

Steps to reproduce: I’ve created a simple test app with which you can reproduce the issue. It’s available here: https://github.com/andsee/Ionic-Virtual-Scroll-Overlap-Bug

Run in chrome while inspecting in a portrait iPhone X and scroll down, keep scrolling until you see some overlapping. Note I’ve set the approxItemHeight to just 10px as this makes it easier to reproduce, it still occurs with larger approximations. Occasionally I’ve had to scroll down to item 200+, other times it happens quickly. It’s probably to do with the speed at which you scroll.

Here is a video of it occurring: https://youtu.be/uu_R5L7KIOE Related code: Full project allowing repro: https://github.com/andsee/Ionic-Virtual-Scroll-Overlap-Bug

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      Home
      <ion-button (click)="refresh()">Refresh</ion-button>
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
    <ion-virtual-scroll #vScroll [items]=ourItems approxItemHeight="10px">
      <div *virtualItem="let item">
        <app-dynamic-one  [layoutData]="item">
        </app-dynamic-one>
      </div>
    </ion-virtual-scroll>
    <ion-infinite-scroll threshold="100%" (ionInfinite)="infiniteScroll($event)" style="z-index: 99999">
      <ion-infinite-scroll-content style="z-index: 99999;"
              loadingSpinner="bubbles"
              loadingText="Loading more ...">
      </ion-infinite-scroll-content>
    </ion-infinite-scroll>
</ion-content>

import { Component, ViewChild } from '@angular/core';
import { IonVirtualScroll } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  @ViewChild('vScroll', { read: IonVirtualScroll }) vScroll: IonVirtualScroll;
  ourItems:any[] = []
  constructor()
  {
    this.add(10);
  }

  refresh()
  {
    this.vScroll.checkRange(0);
  }

  add(howMany:number)
  {
    var offset = this.ourItems.length;
    console.log("Add elements "+offset+" to "+(offset+howMany-1));
    for(var i = offset; i < offset+howMany; i++)
    {
      this.ourItems.push({
        index:i
      });
    }
  }

  infiniteScroll(event)
  {
    this.add(10);
    this.vScroll.checkEnd();
    event.target.complete();
  }

}

Other information:

Ionic info:

Ionic:
   ionic (Ionic CLI)             : 4.12.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.4.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

System:
   NodeJS : v10.15.3 (/usr/local/bin/node)
   npm    : 6.9.0
   OS     : macOS High Sierra

[zeusstl]

In version 4.6.2, ion-virtual-scroll still has issues. In fact, the update seems to have broken a working ion-virtual-scroll.

I decided to dig in a bit to see if I could isolate the problem since I seem to perpetually have ion-virtual-scroll issues like this:

My code: I removed all of my custom css to make sure it wasn’t causing issues.

<ion-content>
        <ion-virtual-scroll #virtualScroll [items]="sessionsList" [approxItemHeight]="18" [approxHeaderHeight]="1" [approxFooterHeight]="1">
            <ion-card *virtualItem="let session;">
                Hi
            </ion-card>
        </ion-virtual-scroll>
</ion-content>

How it renders: (Note that there are 6 cards instead of 11 showing)

Tried switching to items instead of cards, which helped, but I’m trying to use cards. Not items.

Added a console.log() in: node_modules/@ionic/angular/node_modules/@ionic/core/dist/esm/legacy/ion-virtual-scroll.entry.js

The height should be 18px for each. First render ( in the console log) shows empty. Second render - Note the top field is multiples of 18: Third render - Note the top field is suddenly multiples of 28 for some reason:

The solution for me, for the time being, was to put the ion-card inside of an ion-item.

This is especially ironic since the documentation for ion-virtual-scroll gives the example using a card: https://ionicframework.com/docs/api/virtual-scroll

Hope all of this helps someone find the source of this issue and resolve this once and for all. I feel like I’ve spent more time debugging ion-virtual-scroll since (I think) ionic v1, than debugging anything else in ionic.

[xXcoronaXx]

Hi everyone this is my fix/workaround for this problem:

.fixOverlapp {
  height: 100% !important;
  overflow: auto;
}
.fixOverlapp >.virtual-item {
  position: initial !important;
  transform: initial !important;
}

<ion-virtual-scroll class="fixOverlapp" [items]="orders">
....
</ion-virtual-scroll>