jekyll-theme-chirpy icon indicating copy to clipboard operation
jekyll-theme-chirpy copied to clipboard

Page layout avoid status bar when scrolled in PWA on iOS

Open jakee417 opened this issue 11 months ago • 1 comments

Checklist

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

jakee417 avatar Jan 08 '25 02:01 jakee417

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.

jakee417 avatar Jan 08 '25 05:01 jakee417