iOS 11: Footer toolbar shouldn't use safe-area-inset-bottom when tabs are below

[FdezRomero]

Ionic version: (check one with "x")
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x] 3.x
[ ] 4.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request

Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

If you have a footer toolbar and bottom tabs, both will account for safe-area-inset-bottom on the iPhone X, when only the tabs should.

The following CSS rule is currently applied:

.ios ion-footer .toolbar:last-child {
  padding-bottom: calc(constant(safe-area-inset-bottom) + 4px);
  padding-bottom: calc(env(safe-area-inset-bottom) + 4px);
  min-height: calc(44px + constant(safe-area-inset-bottom));
  min-height: calc(44px + env(safe-area-inset-bottom));
}

And it looks like this:

Expected behavior:

This CSS rule not to be applied if tabs are already present. Since is not possible to fix the previous rule to not apply when the parent is an ion-tab, I used this rule as a temporary fix to override it:

.ios ion-tab ion-footer .toolbar:last-child {
  padding-bottom: $toolbar-ios-padding;
  min-height: $toolbar-ios-height;
}

Which fixes the problem:

Steps to reproduce:

Create an app with tabs starter on Ionic 3.9.2. Then include an ion-toolbar inside an ion-footer in one of the pages.

Related code:

<ion-footer>
  <ion-toolbar color="primary">
    <ion-row>
      <ion-col no-padding>
        <button ion-button block clear icon-left color="primary-alt">
          <ion-icon name="albums"></ion-icon> All
        </button>
      </ion-col>
      <ion-col no-padding>
        <button ion-button block clear icon-left color="primary-alt">
          <ion-icon name="exit"></ion-icon> Move
        </button>
      </ion-col>
      <ion-col no-padding>
        <button ion-button block clear icon-left color="primary-alt">
          <ion-icon name="trash"></ion-icon> Delete
        </button>
      </ion-col>
    </ion-row>
  </ion-toolbar>
</ion-footer>

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.1.5
    Cordova Platforms  : android 6.3.0 ios 4.5.4
    Ionic Framework    : ionic-angular 3.9.2

System:

    ios-deploy : 1.9.2
    ios-sim    : 6.1.2
    Node       : v8.9.1
    npm        : 5.6.0
    OS         : macOS High Sierra
    Xcode      : Xcode 9.2 Build version 9C40b

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : legacy

[FdezRomero]

My PR was merged (#13622) so I'm closing this issue 🎉

[shivalipawar]

Is this issue also fixed for ionic v1 as i'm trying to get tabs correctly placed above the home button but it doesn't. Just the part of tabs is not working correctly rest all the buttons at footer are correctly being aligned using the css of ,

padding-bottom: calc(constant(safe-area-inset-bottom) + 4px);
padding-bottom: calc(env(safe-area-inset-bottom) + 4px);

is there any workaround for ionic1 and also will it otherwise get fixed if we use ionic3 instead.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.