<p> in ion-footer doesn't start a new paragraph on ios, it does work on android


#1

I am developping an app for a client. When my client starts the app via Ionic View on iOS the footer is displayed incorrect:

When I look at the same version on my Android phone the footer looks as expected:

When running in ionic-labs the screens for iOS and Andoid also render perfect.

My html:

<ion-header>
  <ion-navbar >
    <button color="wit" ion-button menuToggle >
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>KIES JE HAVERSOORT</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
<ion-grid>
    <ion-row *ngFor="let item of items" (click)="itemTapped($event, item)">
      <ion-col width-100>
        <img src="./assets/{{item.img}}"/>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>
<ion-footer class="havergeel">
  <ion-toolbar (click)="footerClicked($event)">
    <ion-title text-center>WINKELZOEKER</ion-title>
    <p style="font-size: 0.5em; color:#fff; text-align: center;">HIER IS ONZE HAVERMOUT VERKRIJGBAAR</p>
  </ion-toolbar>
</ion-footer>

app.scss:

.havergeel {
  .scroll-content {
    background-color: #fcc540 !important;
  }
  .item {
    background-color: $sidemenukleur;
    border: none;
    padding: 10px;
    color: #FFFFFF;
    max-height: none;
  }
}

Any suggestions anyone?


#2

How does it look if you build the native app yourself and display the app in there?