Anyone else have to do this iOS status bar Hack?

[cowontherun]

Out of the 3 meta below for meta name=“apple-mobile-web-app-status-bar-style” content=" "
Bubble seems to use black-transparent as the default content.

1. Default results in a white status bar with black text,
2. Black results in a black status bar with white text, and
3. Black-translucent results in a transparent background with white text. Additionally, this status bar floats above your content.

However, after loading, the black-transparent status bar does not float on top of my background, instead it seems to push it down so that a white gap shows where the invisible white text of the status bar is.

I’m therefore having to put a hack in to scroll up after loading to an offset of 20px just on that coloured screen. But of course when User scrolls down then up, they will just see the white gap again.

Anyone else have a solution to this or is this a bug or just poor iOS behaviour?

[peter11]

Did you ever solve tihis?

[cowontherun]

Not from memory. I’m sure there’s a way but I haven’t revisited this in a long time. I probably changed my visual design to deal with it though can’t remember!

[peter11]

Ok, thx

[Arifi]

For anyone interested this might be helpful

Add this to Script/meta tags in header

<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

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

& Add this script in the body

<style>
.main-page.bubble-element.Page {
padding-top: 0px;
}
.bubble-element.FloatingGroup.floating-group {
padding-top: 0px;
}
</style> 

And hopefully this should work

Good luck

[axel.duheme]

Thank you Arifi for providing a solution to this post although it was already quite old.
This really helped me.