Virtual Scroll Items disappearing when container not at top of page

[ionitron-bot]

Original issue by @Chris1234567899 on 2018-02-12T15:36:03Z

Ionic version: (check one with "x")
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x ] 3.x
[ ] 4.x

I'm submitting a ... (check one with "x")
[x ] bug report
[ ] feature request

Current behavior:
When using the virtual scroll in mid page (e.g. below another component), during scrolling down items are disappearing on top, where the above component was located. Scrolling up seems to work properly though.

Expected behavior:
All items should be showing in the viewport.

Steps to reproduce:
place a virtual scroll below some container element with a certain height

https://plnkr.co/edit/2HBXDHhi7KRbnaEnywN3?p=preview

<ion-content padding>

  <ion-card>
    <ion-card-header>
      Placeholder
    </ion-card-header>
    <ion-card-content>
      Wasting space
      <br> Wasting space
      <br> Wasting space
      <br> Wasting space
      <br> Wasting space
      <br> Wasting space
      <br> Wasting space
      <br> Wasting space
      <br> Wasting space
      <br> Wasting space

      <br>
    </ion-card-content>
  </ion-card>

  <ion-list [virtualScroll]="items" approxItemHeight="100px">
    <ion-item style="height:100px;" *virtualItem="let item">
      {{item.id}}: {{item.name}}
    </ion-item>
  </ion-list>


</ion-content>

[...]

items:{id:number,name:string}[]=[];
  ionViewDidLoad() {
     for(let i = 0; i<500; i++){
      this.items.push({id:i, name:"Test"})
    }
  }

Other information:

->

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

cli packages: (C:\Users\ADMIN\AppData\Roaming\nvm\v8.9.0\node_modules)

    @ionic/cli-utils  : 1.19.1
    ionic (Ionic CLI) : 3.19.1

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.1.6
    Cordova Platforms  : android 6.3.0
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 25.2.5
    Node              : v8.9.0
    npm               : 5.5.1
    OS                : Windows 10

Environment Variables:

    ANDROID_HOME : C:\Users\ADMIN\AppData\Local\Android\Sdk

Misc:

    backend : legacy

[tulioliveira]

I'm still having this problem, does someone have a fix? Thanks!

[Shery11]

Still have this issue please fix this. It is caused when you have some elements on the top of virtual scroll in ion-content.

This issue has been here for a very long time it's time to fix it i guess.

[allanpoppe]

I'm also having this issue. Ionic version 3.9.2.

I've seen 2 "fixes": calling .resize() on Content, and placing a

outside ion-list. The first isn't enough for me, and the second has it's performance side-effects.

Ionic team, don't leave us :(

[zeusstl]

On version 4.6.2 and still having a similar issue. I'm wondering if someone has recommendations for how to debug these issues.

On every one of my ionic projects since ionic 1.0, ion-virtual-scroll is the most frustrating part. It consistently has issues. I feel lucky every time I get it working without random empty space between items and without items incorrectly appearing and disappearing on scroll. It is theoretically a wonderful feature but never seems to work right.

There are so many bugs reported with ion-virtual-scroll I don't know which ones to connect to reference. Here's one for Ionic 4:
ionic-team/ionic-framework#18409

[lincolnthree]

Also having this issue, still with 4.7.1.

[manibmit]

I'm facing this same problem, Did anyone get the solution, Thanks for advance