Images displayed in *ngFor become corrupt and repeat on iOS

[lincolnthree]

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

[lincolnthree]

Here's what it should look like when images do not repeat. Every item in the list should have its own image:

[maxpaj]

I have a similar problem in my app. iOS only. Is there any workaround for this?

[cnavarroestrella]

I have the same issue, using Cordova WITHOUT Ionic, iOS 11.x (but not on iOS 10), UIWebView. Happens in one app but not another. This feels like a Safari rendering bug, and... with some last-ditch testing it seems it's goes away if I don't use CSS filters, which kind of makes sense and explains why scrolling affects this.

[kensodemann]

@cnavarroestrella - have you tried WKWebView with your Cordova app? If not, that's cool. Just curious as to whether that had any affect or not.

[cnavarroestrella]

@kensodemann I did, but my app crashed on boot and I have to release this week, so I can't be messing with that too much. Sorry I can't help with that.

[lincolnthree]

I've tried WKWebView with the same effect. I'm going to try removing the CSS filters and see if that helps. Unfortunately, though, I can't reproduce it reliably enough to have any idea if it will work. It's just a shot in the dark...

@kensodemann, I saw you +1'd the comment about rendering/filters. Did you get that to work/fix the issue?

[kensodemann]

@lincolnthree - no, I +1'ed it because he tried it in a Cordova app w/o Ionic and got the same issue. That is always a good test to see if it is an issue with Ionic or if it is an issue elsewhere. So I was giving him a thumbs up for the effort.

[lincolnthree]

Gotcha thanks. Just trying to make sure I understood.

Unrelated. I'm actually amazed at the power of Github/Google. Glad I'm not alone on this issue because it's been literally driving me to drink.

I posted this issue here knowing it probably happened to others, but I couldn't find any more info elsewhere on the internet. I'm wondering if this is worth opening an issue about/linking in the Cordova issue tracker.

[maxpaj]

@lincolnthree Is it related to Cordova though? I haven't seen the same thing in the Android version of my app (yet).

"This feels like a Safari rendering bug"
I'm leaning more towards this tbh.

[lincolnthree]

Yeah, probably not. Might just be a Safari bug. I haven't had much luck finding an issue on that side either.

[cnavarroestrella]

Second day, second round of testing, and I definitely can't reproduce the issue when I remove CSS filters as follows:

span.background {
	display: block;
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	background: center center / cover no-repeat #aa2b5a;
	z-index: 0;
	
	
	//Commented these and the iOS11 Safari rendering issue went away:
	//-webkit-filter: brightness(75%);
	//filter: brightness(75%);

	// This produces the same effect as the filter and doesn't trigger the bug:
	span.darken {
		display: block;
		position: absolute;
		top: 0; bottom: 0; left: 0; right: 0;
		background: rgba(0,0,0,0.25);
	}
}

My guess is that the Safari post-processing pipeline has some sort of issue where concurrent attempts at applying some filter interfere with each other, resulting in corruption or repetition. In my case, some images would appear with bad chroma, so the type of filter applied might have an impact in how the issue manifests?

It's definitely a concurrency issue, though, as it happened more frequently when I loaded the images from a cache on the local filesystem as opposed to over the network, where they're more likely to arrive at different times. In this case, the bigger the processing job the likelier it is to happen, I'd say, as the filtering will take more to complete, so maybe increasing the size of the images (or the element where they're rendered?) will make it easier to test?

I'm considering this bug closed on my side and moving on to publishing. Good luck!

[lincolnthree]

That's good to hear. We just published a new release of our app, so I'll post back if users seem to think it's solved.

[JEricaM]

Sorry If I up an old issue, but I have the same problem...
someone solved it or have a workaround?