CODEWITHSUNDEEP
csstypescriptionic-framework
JesseH
JesseH

Reputation: 53

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

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.

iphone error scrolling

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.

Upvotes: 1

Views: 983

Answers (1)

JesseH
JesseH

Reputation: 53

Thanks to @melancia who posted a link I got to the right track.

Removing the cordova webview plugin and reinstalling the latest version solved the problem. Took me about 5 hours, I'm happy :D.

ionic cordova plugin rm cordova-plugin-ionic-webview
ionic cordova plugin add cordova-plugin-ionic-webview@latest

Upvotes: 1

Related Questions