CSS safe area attributes doesn't work on iPhone X

Question

In my case I'm running a web app on iPhone X, I'm trying to add a padding on top to push my body to the safe area using the safe area css attributes of Webkit padding-top: constant(safe-area-inset-top); and padding-top: env(safe-area-inset-top); . However the web view doesn't evaluate correctly these attributes and it's always set to 0. What should I dod to make it work: code :

body {
padding-top: 44px;
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
}

Answer 1

it needs

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> 

in the head section of your HTML

Answer 2

Firstly, safe-area-inset-dir is undefined on Chrome and Safari on mac, where I suspect you're measuring the padding. To my knowledge, you'll have to load the site on an iOS 11 device in Safari to see this variable have any value. I suspect this is why you have the 0px padding issue.

Also, as of iOS 11.2, the keyword to use is env . In fact, the iPhone X design guidelines references this and even includes a nice full example for detecting support for it:

@supports(padding: max(0px)) {
    .post {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }
}

This pattern will do a few things for you:

• Since max is not part of standard CSS, we know that we're on Safari / Webkit, where safe-area-inset-dir should be defined (where dir is a direction).
• Also this will set the padding of the element to either your desired 'normal' padding ( 12px in this case) on most devices or the needed safe area space if you're on an iPhone X. This is because iOS 11 on the iPhone 8 will define this variable as 0 , which would result in padding of 0px otherwise.

Answer 3

without the line padding-top: env(safe-area-inset-top); it should work

Answer 4

This will work like a charm for ionic v3 (or less):

Add this to your index.html

<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

then in yout global.scss

.ion-app {
  --safe-area-inset-top: env(safe-area-inset-top);
  --safe-area-inset-bottom: env(safe-area-inset-bottom);
  height: calc(100% + (var(--safe-area-inset-top) + var(--safe-area-inset-bottom)));
}

in ionic v4 and later seems that this issue is already fix.

Answer 5

/* safe area in ios and android handled */
body {
  --ion-safe-area-top: env(safe-area-inset-top);
  --ion-safe-area-bottom: env(safe-area-inset-bottom);
}

this works for me