Pages Overlap on NavController push

Ionic Framework ionic-v3
1

Hi, I’m trying to do a pretty simple page navigation using the navCtrl.push, but it’s coming out all messed up with the pages overlapping. Any suggestions?

the function call to transition to the next page;

newGame()
  {
    this.navCtrl.push(NewGamePage);
  }

First page

<ion-header>
  <ion-navbar hideBackButton="true">
    <ion-title style="text-align: center;">
      Simple Game
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content >
<ion-card >
  <ion-list>
  <button ion-item (click)="newGame()">
      <ion-icon name="add" item-left></ion-icon>
      Start a Game
    </button>
    </ion-list>
 </ion-card>

  <ion-card>

  <ion-item-divider light>
  	Games In Progress
  </ion-item-divider>
  <ion-list>
  	<button ion-item *ngFor="let game of games">
      Game vs {{ getOpponent(game) }}
    </button>
    <button ion-item *ngIf="games.length === 0">
      <ion-icon name="sad" item-left></ion-icon>
      No Games In Progress
    </button>

  </ion-list>
</ion-card>
</ion-content >

Second page

  <ion-navbar>
    <ion-title>new-game</ion-title>
  </ion-navbar>

</ion-header>


<ion-content >
<p> Start New Game With Someone</p>

<ion-item>
  <ion-label>Daenerys Targaryen</ion-label>
  <ion-checkbox dark checked="true"></ion-checkbox>
</ion-item>

<ion-item>
  <ion-label>Arya Stark</ion-label>
  <ion-checkbox></ion-checkbox>
</ion-item>
</ion-content>
2

@ttc121 man have you found any solution for this , i stacked with same problem, with pop page