IOS Vue Ionic

Tab bar changes height when returning from previewing pdf

I am using Vue3 PWA, Ionic 5.6.11 .

On IOS safari when entering into a pdf by making use of Safari’s built in pdf viewer it changes the height of the Tab bar and only returns to correct size once I change to coverflow in iOS (swipe to other apps and come back)

I have tried giving elements fixed sizes or changing their sizes on events but no luck.

Hopefully there is a quick fix like adding an attribute to a tag somewhere.

  <ion-page scroll="false">
    <ion-header>
      <ion-toolbar>
        <ion-list lines="none">
          <ion-item>
            <ion-title>Documents</ion-title>

            <div class="fileUpload btn btn-primary" slot="end">
              <span>Upload</span>
              <input type="file" class="upload" multiple @input="uploadFile" />
            </div>
          </ion-item>
        </ion-list>
      </ion-toolbar>
    </ion-header>
    <ion-content fullscreen="true" scroll="false">
      <ion-list v-if="filesList">
        <ion-item v-for="file in filesList.fList" :key="file.url">
          <a class="fileListItem" :href="file.url">
            <ion-label>{{ file.name }} </ion-label>
          </a>
        </ion-item>
      </ion-list>

    </ion-content>
  </ion-page>
</template>
type or paste code here