cordova-plugin-statusbar
cordova-plugin-statusbar copied to clipboard
Absolute position element are not positioned correctly
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
- cordova plugin add cordova-plugin-statusbar
- 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" />
- 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
- [x] I searched for existing GitHub issues
- [x] I updated all Cordova tooling to most recent version
- [x] I included all the necessary information above
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));