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

Question

With iOS 11 and iPhone X, Apple indicated that each application should live in a “safe zone” (due to a virtual home button):

Paste the necessary content to prevent clipping. [...] For best results, use the standard system interface elements and Auto Layout to create your interface. All applications must adhere to secure areas and layouts defined by UIKit that provide appropriate insertion based on device and context. The safe area also prevents content from entering the status bar, navigation bar, toolbar, and tab bar.

The problem is that the Ionic (v. 1) application with the tab bar closes this part of the screen, so the bar is under the home button:

Does anyone know how to fix this?

(note: if you run the new Ion v1 application in the iPhone X simulator, you will get two black spaces at the top and bottom of the window, but you can prevent this from adding “viewport-fit = cover” to your meta tag inside index.html)

Answer 1

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

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

Answer 2

You must apply the same principle as in this answer to the Ionic v1 footer, i.e.

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

(or something similar - I have not tested this)

Answer 3

You can add a constraint to your own main view, tabBar, to connect it to the bottom safeAreaLayoutGuide.

 yourView.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor).isActive = true 

Answer 4

For the Ionic 4 project, this will 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 versions of iOS11, and a constant is for older ones.