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


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


exactly the same header with gmaps in ion-content:

Full map tab html:

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

  <div #map id="map"></div>


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.