iOS Web App Status Bar Color

This is a (multiple allowed):

• bug

• 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

[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;
}

[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.