Manifest: Transparent Bottom Navigation Bar

[denaszune]

It would be nice to be able to set the bottom navigation bar on an operating system such as Android to transparent. It would make the PWA feel more at home / native.

[alancutter]

Could you post a screenshot showing this navigation bar for clarity?

[denaszune]

Here is a link to a tweet with a GIF that shows an Android App that supports a transparent navigation bar.

https://twitter.com/davey_burke/status/1126878112170405888?s=20

Here is what a PWA in normal circumstances looks like on my phone.

[NotWoods]

Personally I think this is better as something the browser handles, like the notch safe area. It should be something all sites benefit from rather than a separate opt-in.

[denaszune]

That makes a lot of sense to me. Would this issue need to be moved somewhere else if it is not specific to the manifest?

[Malvoz]

@Denaszune https://github.com/w3c/csswg-drafts/

[andreeaid]

@Denaszune How did you set your status bar to be orange at all? I am having a problem with my PWA; I can't figure out if there is a way to change the status/nav bars' colors at all. I set them to black but the status bar stays gray and the bottom bar is a random blue color. I set he theme-color attribute in both my index.html and in the manifest to #000000, but nothing. Let me know if you are able to help.

[denaszune]

@andreeaid I'm looking at this from my Pixel 3 so I can't speak for all devices. However it is possible it's a bug or Chrome was updated to remove that functionality. I checked my personal PWA and the PWA from the screenshot above (https://squoosh.app/) (both installed on homescreen). Both are showing gray status bars. They used to be green and orange. I also have squoosh installed on my desktop windows pc and it is still showing an orange top bar like it used to.

As for the bottom navigation bar I'm not sure how you are getting a blue color. Mine has always been black like the screenshot above and it is still black today. I don't think there is a way to change it unfortunately. That's why I wanted to make it transparent so I could change its color via an html element.

[andreeaid]

Thank you so much for answering, I have a Pixel 3 XL which I guess is why it is showing a gray status bar as well. I guess I can stop pulling my hair out now, knowing it's a universal issue. Thanks again.