ionic-framework: 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
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 10
- Comments: 31 (3 by maintainers)
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.
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
Third render - Note the 
topfield is multiples of 18:topfield 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.
Hi everyone this is my fix/workaround for this problem:
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.
Same Issue. Its been a long one and had not been fixed for years https://github.com/ionic-team/ionic/issues/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?
Guys, I don’t think it’s not gonna fix! This bug is there from decades. Stop making hope just use angular virtual scroll (https://material.angular.io/cdk/scrolling/overview)
So far i found this solution which is working for me
window.dispatchEvent(new Event('resize'));Sad there is still no feedback here, having the same issue