How to change the webview background color with phonegap on iOS

dev

unread,

Mar 25, 2016, 12:21:39 PM3/25/16

to phonegap

I recently upgraded from phonegap CLI 4.1.2 (cordova build version 3.7.0) to CLI 6.0.1 (cordova build version 4.0.1) I can see while the phonegap webview bounce works on iOS but there is a background color that can be seen underneath the app content when the bounce happens. This color has changed from black to grey after the upgrade.

How can i change this background color which i assume is the webview background color. I tried to browse through MainViewController and AppDelegate Classes/files but did not find a place where the grey color is being set. This definitely is not the color of the <body> element.

Please see the attached screenshot.

Jesse Monroy

unread,

Mar 25, 2016, 6:50:58 PM3/25/16

to phonegap

@dev
are you familiar with HTML?
Jesse

dev

unread,

Mar 26, 2016, 1:08:12 PM3/26/16

to phonegap

Yes i am :)

I got this solution on stackoverflow which worked for me.

http://stackoverflow.com/questions/36223641/how-to-change-the-webview-background-color-with-phonegap-on-ios

Warm Regards,

Dev

Jesse Monroy

unread,

Mar 26, 2016, 3:35:50 PM3/26/16

to phonegap

NO.

Put this in your CSS:

body {background-color:colorYouWant}

dev

unread,

Mar 27, 2016, 2:11:59 AM3/27/16

to phonegap

No this does not seem to work. You see the white area in the screenshot above. That changes to the 'colorYouWant' Color. The area under the app still remains grey. So this is definitely not the body element.

Kerri Shotts

unread,

Mar 27, 2016, 2:50:56 PM3/27/16

to phonegap

Don't allow overscroll on your app and set the body background color. You can still have inertial scrolling in the rest of your app, btw, but because your app container won't bounce, you should never see the underlying color.

On Sunday, March 27, 2016 at 1:11:59 AM UTC-5, dev wrote:

...

Jesse Monroy

unread,

Mar 27, 2016, 7:43:28 PM3/27/16

to phonegap

@Kerri,
this developer seems quite capable, but has misconceptions that will create challenges. Follow the link to SO and see what I mean.

Jesse

dev

unread,

Mar 28, 2016, 10:53:02 PM3/28/16

to phonegap

Thanks Kerri for the response. I tried that and that works too without the bounce. Currently I implemented it by having a plugin that sets the webview background color upon initialization. see the SO link in the chain above.

dev

unread,

Mar 28, 2016, 10:57:15 PM3/28/16

to phonegap

Thanks Jesse :) that is why this group and SO are of great help!

RBAppWare

unread,

Apr 1, 2016, 11:34:37 AM4/1/16

to phonegap

I've noticed MainViewController has changed in the latest version of Cordova, thought I can't find any documentation of the change.

I had a similar issue yesterday, in which I needed the webview to be transparent. I figured it out eventually, the method names have changed slightly.

In MainViewController.m:

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.
    self.webView.backgroundColor = [UIColor clearColor]; // Set background to a colour of your choosing
    self.webView.opaque = NO; // This makes the view transparent, you may not need this.
}

Jesse Monroy

unread,

Apr 1, 2016, 8:13:09 PM4/1/16

to phonegap

@RBAppWare,
if you keep looking at the Java code, you are going walk into a Black Hole.
The entire purpose of Phonegap is to not look at the source for the base and plugins.
If you don't have documentation, a plugin, Javascript, HTML or CSS, then you
will have to write a plugin or recommend that the "core" make a change(s).

Best of Luck
Jesse

Reply all

Reply to author

Forward