Currently, my web app is functioning flawlessly in the browser as well as when saved to the home screen on both Android and iOS. However, I'm facing an issue where setting the height using a percentage unit (%) on the body element doesn't seem to work when the app is downloaded as a standalone application on Android (it works fine if set to a fixed pixel value). Additionally, some elements that use viewport height are also not rendering correctly, despite good support for viewport units. It's as if the viewport has no height at all.
The structure of the code is quite simple:
HTML:
<body>
<div class="container">
<div class="some-element"></div>
<div class="some-element"></div>
</div>
</body>
CSS:
body, html { height: 100%; }
.container { height: 100%; }
.some-element { height: 50vh; }
Could this issue possibly be related to the custom "shell" (which I wasn't involved in creating) used when the app is installed as a standalone app?