Change the color of the iOS 7 status bar in Safari and Chrome

Question

I want to change the color of the iOS 7 status bar in Safari and Chrome. I'm working on a mobile web app and would like it to feel native and right now, I just get a white status bar.

Answer 1

I'm using this while ios has the bug mentioned in other answers.

First I set the statusbar with this:

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

For me, that sets the text white and background transparent. It also floats over my content.

Then I have following css:

body{
    background:#dddddd;
}
body:before{
    display: block;
    content: " ";
    height:20px;
    top: 0;
    background:rgba(0,0,0,0.8);
    position:-webkit-sticky;
    position:sticky;
}

With this approach I have a dark background on my statusbar with some transparency.

I have not tested this with ios6 and it will probably break once Apple fixes the bug. Also it looks a bit off when scrolling to the top and the bounce effect moves the background from below the statusbar.

Still, it's quite easy fix for now and mostly CSS.