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

@Mike1707 wrote:

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.

Video: https://vimeo.com/user95328475/review/318454429/98eaf28b51

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: https://github.com/Mike1707/ionic4-rendering-issue

Maybe you guys have any advises for me.

Thanks,
Mike

Related Code:

<ion-content>
  <div padding>
    <div padding-bottom *ngFor="let post of posts; trackBy: trackByPostId">
      <div padding class="background-card">
        <ion-grid>
          <ion-row>
            <ion-col>
              <h4>{{post.title}}</h4>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col>
              {{post.body}}
            </ion-col>
          </ion-row>
        </ion-grid>
      </div>
    </div>
  </div>
</ion-content>

.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[]>('https://jsonplaceholder.typicode.com/posts').toPromise();
}

trackByPostId(index: number, post: Post) {
    return post.id;
}

interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

Posts: 1

Participants: 1

Read full topic