CSS iOS 6 tinted Status Bars

In iOS6 the status bars containing the clock etc pull their colour from the current application title bar. This is not true of webpages, which sometimes display content behind a translucent status bar.

For example, Soundcloud shows content behind the status bar as you scroll:

Whereas Skype shows a dimmed blue:

So how do we replicate this on a website without rebuilding it as a native application? A few tests later I have come up with this:

My sites top bar is absolutely positioned at the top of the page, so taking advantage of that, I’ve covered the content below the status bar by using 32px of padding at the top, and a negative top margin of 32px to cancel it out.

#masthead {
    padding-top: 32px;
    margin-top: -32px;
}

Having done this, if we reload the page and scroll down, we see a brief flash of normal content followed by a redraw that gives us the above example. To combat this, I added a 32px border to the top of the body element, and adjusted the top padding on my content to match. Now when the flash occurs it’s the same green, and nobody notices.

The only issue I had was with the js scrolling to hide the navigation bar. On most sites now, the address bar will still show ( albeit behind the status bar ) despite this JS. I attempted to fix this by scrolling to 32px rather than 0 or 1, however this uncovered a second redraw bug. The address bar is shown until the user scrolls, at which point that section is redrawn and the status bar is shown in darker green.

Another thing to note, is that sometimes mobile safari will display a solid black status bar. You can get around this for web apps by specifying this meta tag in your <head>:

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

2 thoughts on “CSS iOS 6 tinted Status Bars

  1. I’ve been working on trying to get this sort of behavior. Interestingly, the facebook webapp seems to have a solution for the address bar hiding, can’t decipher their code though!

    • All that needs doing is something to force a redraw, perhaps a timeout followed by another scroll by 1 pixel, I’ve noticed my normal Safari browsing has gone back to opaque black status bars, but you can still setup web apps with the meta to hide the address bar and setup translucent status bars

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.