Android browser bottom control bar overlays content

Question

I have a fix positioned element at the bottom of the screen which works perfectly except for the Android browser where the bottom control bar overlays my element. It doesn't even trigger the window resize event to try and work with that. iOS Safari also has the bottom control bar but it pushes my element correctly and it doesn't overlay it.

I'm open to any suggestion.

Answer 1

You can try the new display: fullscreen

https://developers.google.com/web/updates/2017/04/nic58#fullscreen

When Progressive Web Apps are launched from the Android home screen, they launch in a standalone app-like mode that hides the omnibox. This helps create an engaging user experience, and frees up screen space for content.

However, for even more immersive experiences like games, video players, or other rich content, mobile UI elements such as the system bars can still be a distraction and take up valuable pixels that you may want.

Now you can make your Progressive Web App feel fully immersive by setting display: fullscreen in your web app manifest.

When your app is launched from the home screen, all non-app mobile UI elements will be hidden.