Ionic 4: Rendering of div faster than ion elements on iOS

Hey Guys!

I noticed a rendering issue after upgrading to Ionic 4 and provided a demo project on Github as well as a video to show my issue.


The following can be noticed in the video:

After changing the Tab, I fetch some posts over http. After that, I iterate with *ngFor over the posts and for a few milliseconds my div background cards are visible but empty. Then the ion-grid will be rendered and the content of the cards will be displayed. Actually, for me this is kinda ugly and I don’t know how to solve this. With ionic 3 and the same code everything was rendered at the same time and there weren’t any “empty bubbles” visible.

Github Project:

Maybe you guys have any advises for me.


Related Code:

  <div padding>
    <div padding-bottom *ngFor="let post of posts; trackBy: trackByPostId">
      <div padding class="background-card">
.background-card {
  background: white;
  position: relative;
  border-radius: 15px;
  -webkit-box-shadow: 1px 1px 5px 3px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 1px 1px 5px 3px rgba(0, 0, 0, 0.4);
  box-shadow: 1px 1px 5px 3px rgba(0, 0, 0, 0.4);
async ngOnInit(): Promise<void> {
    this.posts = await this.http.get<Post[]>('').toPromise();

trackByPostId(index: number, post: Post) {
interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;

You posted your internal edit-link to the video instead of the public link.

@Reesz Oh sorry, I updated the link! This is the link:

If you put a *ngIf at the first div, will it render first too?

<div padding *ngIf="posts">

Hey @tokuhara. Unfortunately yes. No change with *ngIf. You can see in the video that there are many “bubbles”. Therefore the *ngFor iterates and posts has to exist.