PWA fullscreen mode incorrect page height

Question

PWA application in fullscreen mode defined in manifest has bigger page height than viewport size. It does not depend on the content of the page and persists even on a blank page. This causes an extra overscroll to appear on the page and "position: fixed" elemets to move up and down with the scroll. Is there any way to fix it?

I also found exactly the same topics on stackoverflow, but there is still no solution:

• https://stackoverflow.com/questions/76013413/chrome-mobile-pwa-fullscreen-app-area-exeeds-html-height
• https://stackoverflow.com/questions/76234229/fullscreen-home-screen-web-app-on-android-phone-has-48px-overflow-in-chrome-h?noredirect=1&lq=1

This behavior appeared recently and is reproduced with chrome version 114.0.5735.130, Android 9, Redmi 6A Build/PPR1.180610.011

Removing chrome updates in app settings fixes the problem, but the preinstalled Chrome version is 80.0 and it is too old.

Answer 1

It worked for me with several Android devices:

1. In the PWA manifest, replace fullscreen with standalone:

display: "standalone"

2. In the Javascript code, call requestFullscreen() on the root element:

document.documentElement.requestFullscreen()

NB: The little drawback with that solution is that it requires a recent user interaction with the app.