为什么加载内容时离子头消失了？

Question

当加载内容（传单图）消失时，离子页眉消失并且离子页脚略微推到顶部，仅在ios上发生。该演示在Android设备上运行良好。

<ion-header>
  <ion-toolbar>
    <ion-title>Edit Geo Location</ion-title>
    <ion-buttons slot="secondary">
      <ion-button color='medium' (click)='CloseModal()'>
        <ion-icon slot="icon-only" name="close"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>


<ion-content>
  <div id="editlocation" #editMap></div>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-button color='primary' expand="full" fill='clear' mode="ios">
      Edit
    </ion-button>
  </ion-toolbar>
</ion-footer>

  constructor(private personService: PersonService) {
    this.GetPerson();
  }

  GetPerson() {
    this.personService.getPerson().subscribe(data => {
      this.Person= data;
      setTimeout(() => { this.loadmap(); }, 50);
      this.getVetSub.unsubscribe();
    });
  }

  loadmap() {
    this.map = new Map('editlocation').setView([this.Clinic.LAT, this.Clinic.LONG], 19);
    tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 }).addTo(this.map);

    this.marker = marker([this.Clinic.LAT, this.Clinic.LONG], {
      icon: icon({
        iconUrl: 'leaflet/marker-icon.png',
        shadowUrl: 'leaflet/marker-shadow.png'
      })
    }).addTo(this.map).bindPopup('Edit your clinic location<br> Tap anywhere to change location.').openPopup();
    this.map.on('click', this.onMapClick, this);
  }

#editlocation {
  height: 100vh;
  width: 100%;
}

ion-content {
  --overflow: hidden;
}

我希望离子页眉和离子页脚会贴在它们的位置，而当我单击离子含量（“传单图”）时不会改变。

This is what i should see

This is what i am getting when clicking on image