Ion-header styling bug with google map in <ion-content>

Greetings.

I getting some styling bug when i use a google.maps element inside of ion-content

Here is how the header looks on the page without google maps

736d4-clip-132kb

exactly the same header with gmaps in ion-content:
663ca-clip-107kb

Full map tab html:

<ion-header>
  <ion-navbar>
    <nav-header-main [title]="'Map tab'"></nav-header-main>
  </ion-navbar>
</ion-header>


<ion-content>
  <div #map id="map"></div>
</ion-content>

css:

page-map-main-tab {
  .scroll {
    height: 100%
  }

  #map {
    width: 100%;
    height: 100%;
  }
}

Tons of tutorials show map usage exactly in the same way.

Why is in my case a header becoming broken when using google maps in ion-content ?

up. a message to bring the thread up.

up. a message to bring the thread up.