0

I tried this one, but it doesn't work. Added
Added meta tag in the index.html tried this CSS property but does not work @supports (padding: max(16px)) { body { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } }

Chandu
  • 1
  • 1
  • 2
  • Does this answer your question? [Ionic iPhone X safe areas not working properly](https://stackoverflow.com/questions/48044636/ionic-iphone-x-safe-areas-not-working-properly) – Adrien Villalonga Oct 10 '22 at 19:13

1 Answers1

7

Try adding the following in your global.scss file:

body {
    margin-top: constant(safe-area-inset-top);
    margin-top: env(safe-area-inset-top);
    margin-bottom: calc(4px + env(safe-area-inset-top));
}

Padding doesn't seem to work.

Adrian Mole
  • 49,934
  • 160
  • 51
  • 83