Ionic-framework: Footer toolbar should not have safe-area-inset-bottom with tab-bar active

[Spinnenzunge]

Bug Report

Footer toolbar adds safe-area-inset-bottom padding although it was already added for ion-tab-bar on iPhone X

Ionic version:


[x] 4.x

Current behavior:
Padding in footer toolbar added beneath buttons, that should not be added with tab-bar visible.

Expected behavior:
No safe-area-inset-bottom padding on toolbar in ion-footer if there is ion-tab-bar on bottom already.

Steps to reproduce:
Create ionic 4 tab starter and add ion-footer with ion-toolbar inside.

Other information:
Bug was already opened for Ionic 3 once: https://github.com/ionic-team/ionic/issues/13615

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.10.3 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.2
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.4.0

Cordova:

   cordova (Cordova CLI) : 7.1.0
   Cordova Platforms     : ios 5.0.0
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 4 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/pascalgraf/Library/Android/sdk)
   ios-deploy        : 1.9.4
   ios-sim           : 7.0.0
   NodeJS            : v10.14.1 (/usr/local/bin/node)
   npm               : 6.7.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.1 Build version 10B61

[Spinnenzunge]

Could be fixed with following line of code

ion-tabs {
  ion-footer ion-toolbar:last-child {
    padding-bottom: 0;
  }
}

[sebaferreras]

Something similar happens when opening the keyboard... The native keyboard already adds the safe-area-inset-bottom so there's no need to add it to the ion-footer as well: