VirtualScroll list not supported by iOS?

Ionic Framework ionic-v3
1

Hi!

I have some issues with the ion-list and VirtualScroll. (ionic 2)

Indeed when ngFor generate card content in the ion-list, avatars are totally deformed on iOS and Safari. (see the screen below)

Nevertheless it works on Android/Chrome and Firefox.

Do you know why ?

image
IMG_2705.PNG750×1334 22 KB

the code:

  <ion-list  [virtualScroll]="events" approxItemHeight="500px">
<ion-item *virtualItem="let event" text-wrap>
<ion-card>
  <ion-item>
    <ion-avatar item-left>
      <ion-img src="{{event.author.profileImg.relativePath}}"></ion-img>
    </ion-avatar>
    <h2>{{event.name}}</h2>
    <p>{{event.start_at | date : 'dd/MM/yyyy'}}</p>
  </ion-item>

  <ion-slides [options]="mySlideOptions">
    <ion-slide *ngFor="let item of event.images" style="margin:auto;">
      <ion-img src="{{item.relativePath}}"></ion-img>
    </ion-slide>
  </ion-slides>
  <ion-card-content >
    <p>{{event.message}}</p>
  </ion-card-content>

  <ion-row>
    <ion-col>
      <button primary clear small>
        <ion-icon name="thumbs-up"></ion-icon>
        <div>12 Likes</div>
      </button>
    </ion-col>
    <ion-col>
      <button primary clear small>
        <ion-icon name="text"></ion-icon>
        <div>4 Comments</div>
      </button>
    </ion-col>
    <ion-col center text-center>
      <ion-note>
        11h ago
      </ion-note>
    </ion-col>
  </ion-row>
</ion-card>
</ion-item>  </ion-list>
2

I have the same issue. I have generated a list using *ngFor and card, all images inside the card are stretched. Any solutions?

<ion-card *ngFor="let item of items">

        <img src="{{item .image}}"/>

        <ion-card-content>
          <h2 class="card-title">
            {{item .title}}
          </h2>
          <p>
            {{item .desc}}
          </p>
        </ion-card-content>
      </ion-card>