Ionic virtualscroll shows only the first 5 items

Ionic Framework ionic-v3
#1

I’m not sure , if it’s a bug within Ionic or I’m doing something wrong here, all am trying to achieve is virtualscroll with ion-img , here is the code:-

generate an array of 100 image-links

posts: Array<any> = [];
  constructor(public navCtrl: NavController, public navParams: NavParams, private http: Http) {
    for (let i = 0; i < 100; i++)
      this.posts.push('https://unsplash.it/200/150?image=' + i);
  }

and the html:-

<ion-content>

  <ion-list [virtualScroll]="posts" approxItemHeight="150px" bufferRatio="1">

    <ion-item *virtualItem="let post;">
      <ion-card>
        <div style="width:100%;height:150px">
          <ion-img width="100%" height="150px" cache="true" [src]="post"></ion-img>
        </div>
        <ion-card-content>
          <ion-card-title>
            Nine Inch Nails Live
          </ion-card-title>
          <p>
            The most popular industrial group ever, and largely responsible for bringing the music to a mass audience.
          </p>
        </ion-card-content>
      </ion-card>
    </ion-item>

  </ion-list>

</ion-content>

and it’s only showing/rendering the first 5 posts , is there something missing or doing it wrong here?