CODEWITHSUNDEEP
javascriptcssios
Apophis
Apophis

Reputation: 563

How to determine the value of safe-area-inset-* in css

I have an issue that I've tried solving in various ways and haven't succeeded. I am currently working on a PWA application that requires running on multiple devices. So far it runs perfectly on all devices until I started testing it on an iPhone emulator. I discovered that the presence of the notch and the space at the bottom of the screen were messing with the design of the app. Soon afterward I discovered the power of env(safe-inset-area-bottom/top/left/right) which allowed me to circumvent this issue in a simple manner. Problem was that one of the elements (the navigation at the bottom) requires to have a certain padding-bottom compared to the bottom of the screen. On most devices, this looks ok but on IOS because of the extra padding from env(safe-inset-area-bottom) it is obscenely large. So I've tried removing the padding on IOS devices in various ways which I'll list here.

1st attempt

Use cascading style

padding-bottom:1.8rem;

padding-bottom:env(safe-inset-area-bottom);

Was unsuccessful because safe-inset-area-bottom does evaluate to 0 on Chrome.

2nd attempt

Use a fallback

padding-bottom:env(safe-inset-area-bottom,1.8rem);

Unsuccessful because again safe-inset-area-bottom evaluates to 0

3rd attempt

Using SCSS if conditional

.toolbar{ @if env(safe-inset-area-bottom) == 0{ padding-bottom: 1.8rem; } @else{ padding-bottom:0 } }

This method I had tried in different case scenarios as such: using a variable to store the env variable in and check the condition on it, putting the if condition in a mixin, and including the mixin in the CSS class.

4th attempt

I tried targetting only Safari Mobile devices with the following CSS

@supports (-webkit-touch-callout: none) { padding-bottom: 0; } @supports not (-webkit-touch-callout: none) { padding-bottom: 1.8rem; }

Again this was unsuccessful

Does anyone know of any simple way of dealing with this?

Upvotes: 4

Views: 15121

Answers (3)

Dayo
Dayo

Reputation: 61

Use height: 100dvh; and it will calculate automatically the height taking into account padding bottom, and top.

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

Upvotes: 3

Kepro
Kepro

Reputation: 402

try to use max

padding-bottom:1.8rem;padding-bottom: max(env(safe-area-inset-bottom), 1.8rem);

Upvotes: 1

Muhammad Kamran
Muhammad Kamran

Reputation: 1027

You need to add viewport-fit=cover in viewport meta tag in index.html.

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

Upvotes: 2

Related Questions