bug: ion-virtual-scroll overlapping items

[andsee]

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

[positlabs]

Confirmed, this is still an issue in 4.6.0 AND dev

[positlabs]

Seems like the code path for stencil usage never measures the elements. I tried hacking at it for a bit, but it only works once after the first scroll event, then things get janked up.

      this.el.forceUpdate();
      this.virtualDom.forEach((node: any) => {
        const domNode: any = this.el.children[node.cell.i - this.range.offset];
        if (!domNode) { return; }
        const update = () => {
          const style = window.getComputedStyle(domNode);
          const height = domNode.offsetHeight + parseFloat(style.getPropertyValue('margin-bottom'));
          this.setCellHeight(node.cell, height);
        };
        domNode && domNode.componentOnReady ? node.componentOnReady().then(update) : update();
      });

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

[dorontal]

You may want to watch or join in on #16632 - it lists a lot of related bugs.

[mrSingh007]

I am also facing this overlapping problem. :/ any workaround for fix for this problem

<ion-content *ngIf="($myObs | async) as tests; else loading">
  <ion-virtual-scroll [items]="tests" approxItemHeight="320px">
    <div *virtualItem="let item;">
    <app-demo [field]="item" ></app-demo>
    </div>
  </ion-virtual-scroll>
</ion-content>

[elvisgraho]

Same Issue. Its been a long one and had not been fixed for years #11542
If you have and observable that throws data at virtual-scroll, you will have an overlapping issue.

Can we fix this after 3 years?

[andsee]

Well it's still with us in Version 5 :-(

They are aware that Virtual Scroll is broken. I'm hoping it will be fixed this year else we are looking at a V6 fix, I'm not quite sure what to read from the following video about V5 at '30:41' when @brandyscarney says "Are we allowed to mention Virtual Scroll?' in response to beginning to talk about V6. I'm hoping she's suggesting it may come before hand.

https://www.youtube.com/watch?v=eegTEIRDlhg

However when I spoke to Ionic support Mid 2019 they suggested that they were looking at Angular's virtual scroll and had found that the manner in which it works would fit better into the ecosystem. This suggests to me there may be an API breaking change coming in V6.

Ionic pointed me towards the following: https://github.com/mhartington/cdk-virtual-scroll-ionic

I've not looked into this as a replacement yet, as we are not near release and are ignoring the overlap for now, preying it will be fixed.

If anyone does try Angular's solution and it solves this issue please post here so that others can gain confidence to go give it a go.