Framework7: iOS Web App Status Bar Color

[iBinJubair]

This is a (multiple allowed):

• [ ] bug
• [x] enhancement
• [ ] feature-discussion (RFC)

• Framework7 Version: 1.5.3
• Platform and Target: iOS

What you did

change this line
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
to
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

Expected Behavior / Actual Behavior

The status bar will be colored depending on <div class="statusbar-overlay"></div> color; inseted of black!
https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

[valnub]

I don't think this is a F7-related issue rather than a browser/os thing. The meta tag has nothing to do with F7.

[iBinJubair]

@valnub I was able to color the status bar (for webpage that added to home screen) doing the following:

1) I add this tag to header
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
this will make status bar transparent and the web app will start from the top of screen.

2) I add css to change .statusbar-overlay background color.

Just try it ;)

[macdonst]

@iBinJubair okay, I see what you are saying and I can reproduce it. However, I'm not sure if there is anything in F7 to be done to fix this as it would easier to just override the style in a CSS file you include yourself.

For instance if you want to match the color of the header then you could do:

.statusbar-overlay {
    background: #000;
}

To force the status bar to always be black or if you want whatever is underneath the statusbar to show through you can do:

.statusbar-overlay {
    opacity: 0;
}

[blackholegalaxy]

@macdonst Thanks, this workaround is very useful.

[nolimits4web]

Issue is closed because of outdated/irrelevant/not actual

If this issue is still actual and reproducible for latest version of Framework7, please create new issue and fill the issue template correctly:

• Clearly describe the issue including steps to reproduce when it is a bug.
• Make sure you fill in the earliest version that you know has the issue.
• Provide live link or JSFiddle/Codepen or website with issue