[SOLVED] Statusbar alpha

[vg0x01]

I’ve decided to use RGBA for navbar and toolbar to give it a classic apple glass effect.

unfortunately for the Statusbar only hex and RGB works, any alpha value inserted takes it back to a full white background. Any other ideas?

.navbar {
  background-color: rgba(247,247,247,0.7) !important;
  -webkit-backdrop-filter: blur(15px) saturate(180%) !important;}
.toolbar {
  background-color: rgba(247,247,247,0.7) !important;
  -webkit-backdrop-filter: blur(15px) saturate(180%) !important;}
.statusbar {
  background-color: rgba(247,247,247,0.7) !important;
  -webkit-backdrop-filter: blur(15px) saturate(180%) !important;}

[Matthew.Becker]

iOS statusbar does not accept any alpha values. Android statusbar does however.

https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-statusbar/#statusbarbackgroundcolorbyhexstring

[vg0x01]

I understand the document says that, but other people online have had experiences with either a transparent blurry statusbar or no statusbar colour at all.

[Matthew.Becker]

I hear you, on iOS I have very mixed results with the statusbar, even running indentical code.

Might be worth checking:

• Requires fullscreen is checked in Xcode;
• iosOverlaysWebView is set to true

https://framework7.io/docs/statusbar.html#statusbar-app-parameters

[vg0x01]

I achieved what I was trying to accomplish. If you’re using just a basic colour then what I’ve done is not necessary and should be done with .statusbar{background: * }, but if you do require transparency, I’ve changed the position of the view and enlarged the navbar.

[nolimits4web]

Make sure you enlarged navbar correctly, for the status bar height you should use env(safe-area-offset-top) css variable to make it work correctly also on device with notch (e.g. iPhoneX)

[vg0x01]

Noted, thankyou very much.