Virtual Scroll: white screen when scrolling fast


#1

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>