Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Page layout avoid status bar when scrolled in PWA on iOS #2173

Open
1 task done
jakee417 opened this issue Jan 8, 2025 · 1 comment
Open
1 task done

Page layout avoid status bar when scrolled in PWA on iOS #2173

jakee417 opened this issue Jan 8, 2025 · 1 comment
Labels
enhancement New feature or request

Comments

@jakee417
Copy link

jakee417 commented Jan 8, 2025

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 jakee417 added the enhancement New feature or request label Jan 8, 2025
@jakee417
Copy link
Author

jakee417 commented Jan 8, 2025

Actually, I tested setting:

<meta name="apple-mobile-web-app-status-bar-style" content="black">

in jakee417@2f918c9

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant