Ion List with *ngFor not displaying well on ios emulator


#1
<!--
  Generated template for the ProfilePage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-buttons end *ngIf="loggedIn">
      <button ion-button (click)="onEditClick()">
        <ion-icon name="settings"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>

<ion-content>
  <div *ngIf="!loggedIn">
    <user-login></user-login>
  </div>
  <div *ngIf="loggedIn">
    <div class="bg-green">
      <img *ngIf="picture_url" [src]="picture_url" class="center profile-pic-big animated bounceIn" alt="">
      <img *ngIf="!picture_url" src="assets/imgs/profile-pic.jpg" class="center profile-pic animated bounceIn" alt="">
      <h4>{{name | titlecase}}</h4>
    </div>

    <div padding>
      <!--
      <ion-segment [(ngModel)]="profile">
        <ion-segment-button value="exams">
          My Exams
        </ion-segment-button>

        <ion-segment-button value="certificates">
          My Certificates
        </ion-segment-button>

      </ion-segment>
    -->
    <h6 text-center>My Exams</h6>
    </div>
    <div>

      <div>
        <div *ngIf="!loaded">
          <ion-spinner></ion-spinner>
        </div>
        <ion-list *ngIf="loaded && subscriptions?.length != 0">
          <div class="books">
            <div *ngFor="let subscription of subscriptions" class="book-text">
              <ion-item>
                  <h6>{{subscription.description | titlecase}}</h6>
                  <p>Subscribed on {{ subscription.created_at | date:'MMM d, y h:mm a'}}</p>
                  <button (click)="gotoExamTakingPage(subscription)" text-center ion-button small >Take exam</button>
              </ion-item>
            </div>
          </div>
          </ion-list>
          <div *ngIf="loaded && subscriptions?.length == 0" class="center">
              <img src="assets/imgs/error.png" class="img" alt="">
              <h3 text-center>Opps it's empty here!</h3>
              <button ion-button small round (click)="toExamPage()">Take exams</button>
          </div>
      </div>

      <!--
      <ion-list *ngSwitchCase="'certificates'">

        <div class="books">
        <img src="https://www.curriculumexpress.com/wp-content/uploads/2011/08/p-10173-English_6th_Grade.jpg" class="img-book"
          alt="">
        <div class="book-text">
          <h3>CCNA Exams Certificate </h3>
          <p>Received Aug 10, 2018</p>
          <button text-center ion-button small block>Save Certificate</button>
        </div>
      </div>
      </ion-list>
      -->
    </div>
  </div>
</ion-content>