Virtual Scroll: white screen when scrolling fast

I have been attempting to implement virtual scroll for the last several days and it doesn’t seem to be working smoothly. I have everything wired up properly and virtual scroll is working, technically, but when I deploy my app to my android device the list I am scrolling through “whites out” when scrolling fast before it renders the cells. It seems that virtual scroll cannot keep up with even moderate speed scrolling so it lags to render cells and shows a blank white screen for a split second before cell data appears.

I have tried to adjust the bufferRatio to allow for the creation of more cells upfront but even high bufferRatios don’t seem to make any difference.

Is there any thing else I can do to eliminate this “white out” effect when scrolling? As far as I know, I am using virtual scroll properly but it just doesn’t seem to perform in an acceptable way.

Here is my code:

<ion-list [virtualScroll]="displaySongs" [approxItemHeight]="'62px'"  [bufferRatio]="8">
      <button *virtualItem="let song"
        ion-item clear class="hymns-list-item"
        [navPush]="songPage" [navParams]=song>
          <h4 class="song-title">
              <span class="song-number">{{song.number}}</span>&nbsp;&nbsp;{{ song.title }}
          </h4>
          <small class="song-genre">{{song.category}}</small>
      </button> 
    </ion-list>
1 Like

I am having the same issue, did you find a solution? @astears

I was never able to find a solution. I dug through stack overflow and asked on other forums with no avail.

It appears that all the other issues relating to virtual scroll essentially came down to “virtual scroll is broken.” or “use infinite scroll” which doesn’t work for my needs… Not really what I wanted to here but I gave up after It seemed that the ionic team was ignoring git issues regarding virtual scroll… or they just flat out closed issues that were unresolved.