离子 - 奇怪的透明状态栏

Question

我目前正在开发一款带有离子3的应用程序，我从一开始就遇到了一个问题。 起始页上的状态栏（仅在起始页上）看起来是透明的。这是一个截图：

但所有其他页面看起来应该如何：

为什么会这样，我该怎么做才能摆脱这个问题？

首页的HTML：

<ion-content>
  <div class="head">
    <div class="balance">
      301 &euro;
    </div>
    <div class="balancetext">
      CURRENT BALANCE
    </div>
    <div class="menu">
      <button class="addbutton" (click)="onNewIncome()">
        <img src="./assets/imgs/plus.png"> INCOME
      </button>
      <div class="split"></div>
      <button class="exbutton">
        <img src="./assets/imgs/minus.png"> EXPENSE
      </button>
    </div>
  </div>
</ion-content>

和必要的SCSS：

html, body{
    width: 100%;
    background-color: #f5f8fa;
  }
  .head{
    background-image: url('../assets/imgs/pattern_1.png');
    background-size: cover;
    height: 15em;
    box-shadow: 0px 0px 30px rgba(0,0,0,0.3);
  }