Absolute position element are not positioned correctly

[bigor77]

Bug Report

Problem

Absolute positioned element in html are not positioned correctly after using this statusbar plugin

What is expected to happen?

Div element with class footer should be all the way down stuck to the bottom of the screen

CSS
.footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
z-index: 100;
}

What does actually happen?

There is a gap of 20px between div element and the bottom of the screen. Also $(window).height() returns 20px less then expacted. I switched to window.screen.height since it is $(window).height() + 20

Information

1. cordova plugin add cordova-plugin-statusbar
2. I added last section viewport-fit=cover in meta tag
   <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, viewport-fit=cover" />
3. Status bar is overlapping my app which is a behaviour that I wanted

Environment, Platform, Device

Platform: ios
Device: iPhone 7 (iOS 14.3)

Version information

Cordova v10
XCode v12.2
cordova-plugin-statusbar 2.4.3 "StatusBar"
OS: MacOS Catalina 10.15.7

Checklist

• I searched for existing GitHub issues
• I updated all Cordova tooling to most recent version
• I included all the necessary information above

[bigor77]

if you add this two line to your css class it will work as expected (leave bottom: 0; as well)
bottom: calc(0px - constant(safe-area-inset-top));
bottom: calc(0px - env(safe-area-inset-top));