Ionic2- virtual scrolling not working as expeced

Ionic Framework ionic-v3
1

I don’t know why the virtual scrolling I implemented is looking weird.
I have a list of words and I wanna show them in a page. earlier I iterated these words using a for loop but the scrolling performance was horrible in android devices. So I decided to implement basic virtual scrolling as mentioned in ionic’s official documentation.

http://rhymebrain.com/talk?function=getRhymes&word=baby

This is the data That I’m trying to iterate. I only need the words, no other info.
Code for my virtual scroll looks like this:

<ion-card *ngIf="words?.length > 0">
  <ion-card-header>rhymes with...</ion-card-header>
  <ion-card-content>
    <ion-list [virtualScroll]="words" [approxItemHeight]=" '500px' ">
        <button *virtualItem="let word" ion-button round small>
                {{word.word}}
        </button>
    </ion-list>
  </ion-card-content>
</ion-card>

In my web browser, the results I got are terrible. I will share some screens:

Pic 1: User searches for a word to fetch all rhymes but no data is shown even when response is not null.

image
1.PNG378×605 10.1 KB

Pic 2: If I navigate to another page and come back, I see a few of the rhymes.

image
2.PNG352×583 11.9 KB

Pic 3: If I repeat step 2 or scroll a little down, I see few more words. It looks so weird.

image
4.PNG355×535 10.7 KB

I have no idea why virtual scroll is acting like this. Can anyone tell me what mistake I made or a better solution for this?
thanks in advance