How can I change the UIWebView background color after sliding down UIWebView to fix the iOS7 status bar overlay issue?

Question

I'm writing a Phonegap 3.0+ app.

There is an issue with the status bar overlapping views in iOS7 which user Ludwig Kristoffersson provided a working answer here

Now that I have UIWebView with a 20px top margin, how can I change the UIWebView background color? I need the area behind the status bar to be the same background color as the "people" toolbar.

I have almost no experience in Objective C, and have been looking through possible SO questions to find a working solution but with no success.

UIWebView background color
UIWebView background is set to Clear Color, but it is not transparent


Below is the code that I've tried so far:

- (void)viewWillAppear:(BOOL)animated {
    //Lower screen 20px on ios 7
    if([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
        CGRect viewBounds = [self.webView bounds];
        viewBounds.origin.y = 20;
        viewBounds.size.height = viewBounds.size.height - 20;
        self.webView.frame = viewBounds;
        [self.webView setOpaque:YES];

        //neither of these seem to work when uncommented:
  //    [self.webView setBackgroundColor:[UIColor grayColor]];
  //    self.webView.backgroundColor=[UIColor grayColor];
        }
    [super viewWillAppear:animated];
    }

---

UPDATE 1

- (void)viewWillAppear:(BOOL)animated
{
//Lower screen 20px on ios 7
if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
    CGRect viewBounds = [self.webView bounds];
    viewBounds.origin.y = 20;
    viewBounds.size.height = viewBounds.size.height - 20;
    self.webView.frame = viewBounds;

    self.webView.backgroundColor = [UIColor grayColor];
    self.webView.opaque=NO;
}
[super viewWillAppear:animated];
}

That still seems to give me a white background behind the status bar, rather than gray.

The result I'm hoping for is like this:

Answer 1

Change the Opaque property to NO and check like this :

self.webView.backgroundColor = [UIColor grayColor];
self.webView.opaque=NO;

its working fine for me.

Answer 2

So I realized that the code pushes the UIWebView down 20px. Meaning that the white space by definition cannot be UIWebView. The white space is the main view which I changed the background color by doing the following:

1. Go to MainViewController.xib:



2. Select the main view:


3. Show the attributes inspector and change the color. Done.

Obvious now that I think about it, but hopefully this helps someone in future.

Answer 3

This is working for Cordova 3 and Cordova 2.9

So after you set your app's background color via CSS like this:

 body{
   background-color: #000;
 }

Go to your CordovaXlib.xcode.proj and look for your "Classes" folder MainViewController.m line#142

Uncomment the "webViewDidStartLoad" method or function and just add

  self.webView.opaque=NO;

So you will have something like this:

 - (void) webViewDidStartLoad:(UIWebView*)theWebView
 {
    self.webView.opaque=NO;
    return [super webViewDidStartLoad:theWebView];
 }