ARTICLE AD BOX
I have a PWA with "display": "standalone" set in my manifest. The app uses body { height: 100dvh } to fill the entire space of the visible viewport. This has been working for nearly two years (since originally discovering this solution).
Recently however, without any changes to this design, my PWA has stopped calculating the height correctly on initial page load, including a page refresh. This misbehavior is not present when using the mobile Chrome browser - only when opening as a Chrome PWA.
My app now has about 50px of over-scroll, and my bottom actions bar (the entire navigation for my PWA) is hidden under the fold and requires vertical scrolling to reveal. If I open and close the on-screen keyboard, it seems that the forced height recalculation properly adjusts the visible height and the scrolling is eliminated, and my bottom navigation is once again locked to the bottom of the visible viewport.
The code to reproduce this can literally be an empty page, opened as a "standalone" Chrome PWA:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, interactive-widget=resizes-content"> </head> <body style="height: 100dvh"></body> </html>The result:
I'm unable to find any recent Chrome bugs that have changed behavior. Is there any solution available? Can I manually force a recalculation on pageload to simulate the keyboard opening/closing?
Pixel 9 Pro
Chrome app version 142.0.7444.171
Thanks everyone.
EDIT: I've discovered an additional oddity. When refreshing the empty page, Chrome's own progress bar seems to be misplaced by the exact same amount as well. This is starting to seem more like a Chrome bug but I can't find any documentation of it.
