Images displayed in *ngFor become corrupt and repeat on iOS

[ionitron-bot[bot]]

Original issue by @lincolnthree on 2017-11-22T16:26:48Z

Ionic version: (check one with "x") (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1) [ ] 2.x [ ] 3.x [x ] 4.x

I'm submitting a ... (check one with "x") [x ] bug report [ ] feature request

Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior: At seemingly random times, images in the --prod application (only on iOS) will become corrupt and display incorrectly. Sometimes the images simply repeat improperly, other times they become jagged and distorted. Scrolling the page up and down rapidly seems to clear them up most of the time.

I have not been able to catch this occurring in a dev build, or in a state that would allow me to attach a debugger, but nothing in the code changes these image URLs, and "shaking" the scrollbar seems to clear it up sometimes, so doesn't seem like a code issue on my end. I'm at about my limit for trying different ways to display images to prevent this from happening.

I've tried background images, ion-img (can't use for various other buggy reasons), regular imgs, etc.

Expected behavior: I would expect that the images render correctly without corruption or incorrect repetition.

Steps to reproduce: I wish I could provide steps to reproduce. It is seemingly random when this happens. Users have only reported it on iOS. iOS version does not seem to be related. It occurs both on WKWebView and UIWebView.

Related code:

  <ion-grid *ngIf="hand">
    <ion-row *ngIf="!isLockedOut()">
      <ion-col *ngFor="let card of hand">
        <img bind-src="card.id | gatherer | safeurl" class="card-img" />
      </ion-col>
    </ion-row>
  </ion-grid>

Other information: Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

localhost:marit-mtg-ionic lb3$ ionic info

cli packages: (/Users/lb3/projects/maritlabs/marit-mtg-ionic/node_modules)

    @ionic/cli-utils  : 1.18.0
    ionic (Ionic CLI) : 3.18.0

global packages:

    cordova (Cordova CLI) : 7.1.0 

local packages:

    @ionic/app-scripts : 3.1.2
    Cordova Platforms  : android 6.2.3 ios 4.5.0-dev
    Ionic Framework    : ionic-angular 3.9.2

System:

    ios-deploy : 1.9.0 
    ios-sim    : 5.0.8 
    Node       : v9.0.0
    npm        : 2.15.12 
    OS         : macOS Sierra
    Xcode      : Xcode 9.1 Build version 9B55 

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : legacy

[lcabrales]

Is there a workaround for this issue? I'm also experiencing this exact problem with ng-repeat in Ionic 1.

[Sroose]

For me the fix to a simlar problem was to call the function populating the list from ngAfterViewInit and not from ngOnInit