CSS safe area attributes doesn't work on iPhone X

user_3151549 0
Viewed 26401

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);
}

enter image description here

enter image description here

iphone-x css iphone html ios
5 Answers

it needs 

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

in the head section of your HTML

user_12985310

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.

user_106489870

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

user_26113910 
/* 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

user_17428200
Related