Ionic iOS tabs page can bounce white space on top and bottom of app-area

@Jesse-H wrote:

My app shows white area when scrolling up/down tabspage when selecting header or tab area.

When you scroll down it shows the white background, when you scroll up the white space will move on top of the tabs button area. I included a gif showing the problem.

This problem only exsist on iOS, android works fine.

Tabs page (html) is as follows:

<div id="bgFab" *ngIf="showBgFab == 1" (click)="closeFab(fab);"></div>

<ion-fab center bottom class="pokeballfab" *ngIf="hidePokeball === 0" #fab>
       <button ion-fab class="pokeball" (click)="openFab(fab);" ></button>
       <ion-fab-list side="top">
            <button ion-fab (click)="openPage('SettingsPage', fab)"><ion-icon name="settings"></ion-icon></button>
            <button ion-fab (click)="openPage('FriendsPage', fab)"><ion-icon name="people"></ion-icon></button>
            <!-- <button ion-fab><ion-icon name="person"></ion-icon></button> -->
      </ion-fab-list>
</ion-fab>

<ion-tabs #homeTabs color="primary" no-bounce>
  <ion-tab [root]="tab1Root" tabTitle="Map" tabIcon="map"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Friends" tabIcon="people"></ion-tab>
  <ion-tab></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Community" tabIcon="planet"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="News" tabIcon="paper"></ion-tab>  
</ion-tabs>

If tried these CSS settings (in app.css) already but without results:

ion-tabs, ion-app, ion-nav, body, html, .ion-page, .nav-decor, .app-root {
    height: 100vh;
    overflow: hidden;
} 

Also I tried if the problem would resolve if I removed the ion-fab and bgFab div but it did not.

I hope somebody can point me in the right direction or had a similar problem.

Posts: 2

Participants: 1

Read full topic