Ionic-framework: ion-img with ion-avatar in VirtualScroll

[ghenry22]

Short description of the problem:

Images are not displayed properly in a VirtualScroll list when using ion-img with type ion-avatar on an item. The image is stretched out really large.

Screenshots attached

What behavior are you expecting?

The image is presented as a standard avatar style

Steps to reproduce:

1. Create a virtual scroll list. Use ion-img for the image in an ion-avatar on an item.
2. Not reproducible in plunker/browser.
3. Test on iOS simulator or an actual phone

Which Ionic Version? 1.x or 2.x
2.0 beta9

Cordova CLI: 6.2.0
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.9
Ionic CLI Version: 2.0.0-beta.30
Ionic App Lib Version: 2.0.0-beta.16
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v5.11.1
Xcode version: Xcode 7.3.1 Build version 7D1014

[mpaland]

I had a similar issue with ion-img
Problem are the "min-..." in app.ios.css

ion-img img {
  min-width: 100%;
  min-height: 100%;
}

So ion-img always fills out the entire space.
Is that really wanted?

[ghenry22]

I imagine it is supposed to be bound by the surrounding element (ie the ion-avatar, ion-thumbnail etc) but due to a bug in this version it's not.

I have just dropped ion-img out of my code for now as it feels like it needs a bit of love before it's ready for primetime. I'll keep testing it out each version update if there is anything relevant in the change log until it's ready.

[Cameron637]

Is this fixed for anyone? I'm still seeing this on beta 11

[heikoholland]

Still not fixed. It's ok in browser but images are still streched in iOS and Android.
Also the text next to the thumbnail is missing.

  <ion-list [virtualScroll]="highlights" *ngIf="highlights && highlights.length > 0">

    <ion-item class="item-text-wrap" *virtualItem="let item" (click)="openFile(item.file_location)">
      <ion-thumbnail item-left>
      <ion-img src="{{imgBaseUrl}}{{item.thumbnail_location}}"></ion-img>
      </ion-thumbnail>
      <h2 class="text-wrap">{{item.title}}</h2>

      <p>{{item.time_modified | androidDate}}</p>

      <p>{{item.file_mime_type | mimeType}}</p>
    </ion-item>

  </ion-list>

Cordova CLI: 6.3.1
Gulp version: CLI version 3.9.0
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.0.0-beta.37
Ionic App Lib Version: 2.0.0-beta.20
ios-deploy version: 1.8.6
ios-sim version: 3.1.1
OS: Mac OS X El Capitan
Node Version: v6.2.1
Xcode version: Xcode 7.3.1 Build version 7D1014

[iignatov]

Here's a forum topic showing the same issue:
https://forum.ionicframework.com/t/ion-img-bug-under-ios/62609

[zakton5]

I'm having a similar issue, except that I am using AmCharts to build a gauge within each virtual item. After navigating to another back and then going back, the AmCharts are enlarged and no longer within their old bounds. Oddly enough, it only happens to the last item. This does not happen when the list is not using virtual scroll.