Page layout avoid status bar when scrolled in PWA on iOS
Checklist
- [X] I have read and accepted the contributing guidelines.
Is your feature request related to a problem? Please describe
On the pwa of my blog: https://jakee417.github.io/posts/matrix-inverse/, the layout does not respect the status bar when scrolled up:
But does respect the status bar when it is not scrolled:
Describe the solution you'd like
Have the layout respect the status bar on ios irregardless of scroll (same as chrome app when not viewed as pwa):
Scrolled:
Not scrolled:
Describe alternatives you've considered
I think this is relevant: https://codeburst.io/progressive-web-apps-customize-status-bar-23c4b2de590f?gi=87c0f071fba6
But I am unsure how to implement it.
Additional context
No response
Actually, I tested setting:
<meta name="apple-mobile-web-app-status-bar-style" content="black">
in https://github.com/jakee417/jakee417.github.io/commit/2f918c9157f79e65e73ba49974cd82969b8b1d95
and it seems to now have the correct behavior (and even changes with the system theme!). As an added bonus, when enlarging an image, the dismiss cross in the top right is now clickable instead of being hidden behind the status bar requiring the user to navigate out of the post to dismiss.