2

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.

html is 664 pixel in height, but somehow I got a white bar at the bottom of the screen

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?

dturnschek
  • 31
  • 4

2 Answers2

1

I've got the same problem after updating chrome on android last week to 113.0.5672.77. My fullscreen web apps worked fine on older chrome versions, so I guess this is a bug and should be reported.

Chris
  • 11
  • 1
0

if you use ionic just overflow-y hidden and if you use height 100vh use height 100dvh

Abolfazl Moradi
  • 11
  • I am not using ionic, and I am not even sure where to place the overflow-y, because the bar is not even a part of my application, according to the marked area in chrome dev tools. Anyway, using it in the `HTML` or `body` didnt do much – dturnschek Apr 14 '23 at 11:44