Images flickering on iOS

Ionic Framework ionic-v3
1

HI all,

Here is my issue:
in my view I have ion card with a ngFor loop. inside the card i have 2 images. In my code it’s like that
array {title: “”, img : “”} and I reload the content/ data each 30s. Of course to avoid multiple push I empty the array first and then push.
In the iOS device, the images a flickering/ blinks (between the array == 0 and array = newData)… nothing on Android…
How can i disable this?!! Please help

HTML → 

<ion-card *ngFor="let top3data of top3fosts; let idx=index" >
  <img *ngIf="top3data.profile.pic != null" class="imgprofileFostLive" src="{{top3data.profile.pic}}">
</ion-card>

TS->
> this.top3FostsList = ;
> this.trendyFostsList = ;

http.get … {
this.top3FostsList.push(data)
this.trendyFostsList.push(data)
}
this.top3data = top3FostsList;

2

What does that mean?

3

it means:
this.dataServices.timerTrendyFost = setInterval(() => {
this.getTrendy(this.cityId);
}, 30000);

I just refresh the data

4

I’m not entirely sure what this means, but it seems wasteful and a potential source of your problem. As a user, I would also prefer something like <ion-infinite-scroll> to your 30 second polling. I want to be in control of when new data is fetched; I don’t want periodic jankiness.

5

I also still don’t understand what you are doing and how it works, which is what etc.
You either explain it more and better, or I won’t be able to help you.

6

Well, I a have to refresh the feed of my app… So I getMyFeed each 30s since i dont have any socket or other communication between Client/Server.
Well I ended up to avoid that

this.oldData = newData

For now, inside my foreach i do

this.oldData[i].profile = newData[i].profile
this.oldData[i].likes = newData[i].likes
…

Dont forget the check if a new feed has been added

if (this.oldData[i[) { … } else { this.oldData.push(newData[i])
}

Just to avoid Image flickering on iOS. Pain in the ass. You can thanks the guy in this post

javascript - Flicker on data update Angularjs - Stack Overflow

If anyone avoided to do in such weird way, please let me know

7

I still don’t understand why you do not let the user decide when to do this.

8

yes it would be better. But We agreed like that for now. We have position/ ranking. So its better to see it live.
But maybe we will change in a near future