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?