How to fix CSS safe area to work in iOS 14.5?

Issue

My code for safe area is not working since I updated iOS to 14.5. Code was perfectly working in my ionic 5 project with iOS 11.x with: padding-bottom: env(safe-area-inset-bottom) !important; and in 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" />

Now the issue is env(safe-area-inset-bottom) which is always resolved to 0 so there is no bottom padding on my phones iPhone 11 and iPhone 12. I guess that code can't detect notch area on iPhones anymore.

Solution

This was my mistake, I saw that code contains 2 meta tags, and somehow this code worked on safari 13 and not working on safari 14.

  <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" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />

After the deleting second line of code safe are is working as usual.

To check if safe area and env() is working on your phone just open https://developer.mozilla.org/en-US/docs/Web/CSS/env() and check examples.

I am leaving this question here in case someone has similar issue.

Answered By - playerone