So, I got an Angular PWA, which is set to run in full screen.
But when I set the "display": "fullscreen" in the webmanifest, instead of "display": "standalone" I get an extra piece of scrollable content that is exactly the size of the now hidden android navigation bar.
As you can see in the image, the bar i am talking about is not even part of the html tag, but is below it. I am not sure if I even could control it with CSS
This bar is below the footer, and is always the same color as the <body> background color.
It only appears in fullscreen mode of the installed PWA. In Standalone or Browser mode, it does not appear.
When I open the app, the footer is at the bottom of the screen and the bar is outside of the screen, but even on the page in the image - which is not scrollable due to the content amount - i somehow can scroll down to make this bar visible.
Changing the <html> or <body> height does not yield results.
How do I get rid of it?
if you use ionic just overflow-y hidden and if you use height 100vh use height 100dvh