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?