Can't change iOS Status Bar Color and add padding

I’m trying to make the iOS status bar overlap with a transparent background so that it looks like this: image
However, it’s coming out like this:

I’ve tried things such as StatusBar.backgroundColorByHexString() and right now I have StatusBar.overlaysWebView(true). I can’t seem to find any information on making the status bar transparent for iOS. The header will change color, so I don’t want to just have it above with the same color as the header because transitions between pages with different colored headers aren’t very good looking and jarring.

Another issue I’ve been having is the statusbar-padding class doesn’t seem to be affecting the navbar and it overlaps the top of it. This occurs on Android as well. Should I just add CSS for each and every device and their status bar padding?

I’m using Ionic 2.2.1 and testing on an iPhone 5S with ios 10 using Ionic View.

are you still facing the issue? I only got this behaviour in iPhone 5 not 6 or 7… So shit…