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.

Imminence

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.

Loverly

Thanks for your reply! Could you please provide some information for case, when user uses default browser on android KitKat? – Malanie

Link-only answers are generally frowned upon on Stack Overflow. In time it is possible for links to atrophy and become unavailable, meaning that your answer is useless to users in the future. It would be best if you could provide the general details of your answer in your actual post, citing your link as a reference. – Hellbent