Question: With iOS 11 and iPhone X [Apple specified](https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/) every app should live in a "safe area" (due to the virtual home button):

[![enter image description here](https://i.stack.imgur.com/5643k.png)](https://i.stack.imgur.com/5643k.png)

> 
> **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:

[![enter image description here](https://i.stack.imgur.com/I5wzF.png)](https://i.stack.imgur.com/I5wzF.png)

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: 
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.
You should be able to apply the same principle outlined in [this answer](https://stackoverflow.com/a/46232813/777265) to the Ionic v1 footer, i.e. 

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

```

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