Ionic tab bar overlaps home button (iPhone X - iOS 11)

Question

With iOS 11 and iPhone X Apple specified every app should live in a "safe area" (due to the virtual home button):

Inset essential content to prevent clipping. [...] For best results, use standard, system-provided interface elements and Auto Layout to construct your interface. All apps should adhere to the safe area and layout margins defined by UIKit, which ensure appropriate insetting based on the device and context. The safe area also prevents content from underlapping the status bar, navigation bar, toolbar, and tab bar.

The problem is a Ionic app (v. 1) with tab bar cover this part of the screen, therefore the bar is under the home button:

Does anyone know how to fix it?

(please note: if you run a new Ionic app v1 inside iPhone X simulator you will get two black spaces, at the top and bottom of the window, but you can prevent this adding "viewport-fit=cover" to your meta tag inside index.html)

Answer 1

For an Ionic 4 project, this would be:
app.scss

body {
  margin-top: env(safe-area-inset-top);
  margin-top: constant(safe-area-inset-top);
}

ion-tab-bar {
  margin-bottom: env(safe-area-inset-bottom);
}

env is for more recent iOS11 versions, and constant is for older ones.

Answer 2

You should be able to apply the same principle outlined in this answer to the Ionic v1 footer, i.e.

.bar-footer {
    margin-bottom: constant(safe-area-inset-bottom);
}

(or something similar - I haven't tested this)

Answer 3

For an Ionic1 project, I found that targeting the tab-nav did the trick.

.tab-nav {
    margin-bottom: constant(safe-area-inset-bottom);
}