Strange behaviour when element is set to absolute position


#1

I have an element with fixed position, when i press the back button, the element stays on screen and is not being pushed with the page.

Ionic 3.5.0

Please see gif:

Here is the code:

<ion-header>
  <ion-navbar color="blue">
    <ion-title>{{municipality[0].municipality}}</ion-title>
  </ion-navbar>
</ion-header>

<div #pleaseConnect id="please-connect">
  <p>Please connect to the Internet...</p>
</div>
<div #map id="map"></div>
<ion-content no-padding>
....
</ion-content>

CSS:

  .scroll {
    height: 100%;
  }

  #map {
    width: 100%;
    position: absolute;
    overflow: hidden;
    height: 30.5%;
    z-index: 5;
    margin-top: 64px;
  }

  .scroll-content {
    top: 34% !important;
  }

how can i fix this? It’s really ugly!