Status Bar on iOS Background Color - ios

I’m having a hard time setting the iOS status bar background color to transparent. I’m using the latest version of cordova statusbar and ionic, and leaving everything to their default setting, however i’m getting a white background color for some reason. How can i set the background color to transplant, i though this is the default value anyhow.

Okay so after referring to:
https://issues.apache.org/jira/browse/CB-12886 and
https://issues.apache.org/jira/browse/CB-12890
The issue occurs in iOS 11, and cordova-ios-4.5.0 and is simply solved by adding the cover value to viewport-fit as follows in your index.html:
<meta name="viewport" content="viewport-fit=cover, initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />

This worked for me:
Run cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git
config.xml Add <preference name="StatusBarBackgroundColor" value="#" /> inside <platform name='ios'> tag
index.html Add <meta name="viewport" content="viewport-fit=cover, initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
Save.
Launch the simulator.

As maintained by luckystarr. Plugin cordova-plugin-statusbar will help you achieve what you want to do.
After adding plugin add following preference in config.xml to get black background
<preference name="StatusBarBackgroundColor" value="#000000" />
To change the color of icons and text in status bar you can use
<preference name="StatusBarStyle" value="lightcontent" />
Available values are default, lightcontent, blacktranslucent, blackopaque.

Please check Following
window.cordova.plugins.StatusBar.overlaysWebView(false);
It worked for me.

If you are using statusbar plugin, you should also update it to latest version (2.3.0 has just been released). This new version of the plugin handles the iPhone X notch.
BTW, the problem has nothing to do with the cordova-ios version, it's a new "feature" of the WebView when you compile the apps with iOS 11 SDK (it won't appear if you use Xcode 8 as it uses SDK 10). viewport-fit=cover is the way to go for removing this fake statusbar.

Related

Statusbar in Cordova-ios stays translucent

I am using the cordova status bar plugin and the statusbar is translucent and white. I am developing for iOS 11 witht he newest Version of macOS and xCode.
I researched the errors but none of the fixes proposed helped me.
Adding viewport-fit=cover to the meta tag at the index.html did not work.
Adding the feature tag with ios-package, as mentioned in the docs, to www/config.xml as a child to widget.
Adding the preference tag with StatusBarBackgroundColor and Overlay to the config.xml (as a child to widget and to ios) and www/config.xml did not works.
Using it in Code with the StatusBar global var inside a cordova.platformId = 'ios', has no effect.
In the end the app starts with a black bottom, the black bottom is gone and then there is the translucent status bar.
Adding this to my config.xml solved the problem for me:
<gap:plugin name="cordova-plugin-statusbar" source="npm"/>
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#ffffff" />
<preference name="StatusBarStyle" value="default" />
So, i have ran into the similar issue, that i neede to my statusbar to overlay the WebView and be white with 50% transparency. So i investigated the plugin code and noticed, that if status bar overlays WebView - then the plugin ingores the background settings.
So the only solution was to fork the original plugin and modify it. You can take it here:
https://github.com/Fomenko-developer/cordova-plugin-statusbar
Installation:
cordova plugin add https://github.com/Fomenko-developer/cordova-plugin-statusbar.git

Cordova app not displaying correctly on iPhone X (Simulator)

I tested my Cordova-based app yesterday on the iPhone X Simulator in Xcode 9.0 (9A235) and it didn't look good.
Firstly, instead of filling the full screen area, there was a black area above and below the app content.
And worse, between the app content and the black was two white bars.
Adding cordova-plugin-wkwebview-engine so Cordova renders using WKWebView (not UIWebView) fixes the white bars.
By my app is not migrated from UIWebView to WKWebView due to performance and memory leak issues when using cordova-plugin-wkwebview-engine which occur when loading images downloaded from Inapp Purchase hosted content into an HTML5 canvas (direct file:// access by the Webview is not possible due to security restrictions in WKWebView so the image data must be loaded via cordova-plugin-file).
These screenshots show a test app with a blue background set on the <body>.
Above and below UIWebView, you can see the white bars, but not with WKWebView:
(source: pbrd.co)
(source: pbrd.co)
Both Cordova Webviews exhibit the black areas when compared to a native app which fills the full screen area:
I found the solution to the white bars here:
Set viewport-fit=cover on the viewport <meta> tag, i.e.:
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
The white bars in UIWebView then disappear:
The solution to remove the black areas (provided by #dpogue in a comment below) is to use LaunchStoryboard images with cordova-plugin-splashscreen to replace the legacy launch images, used by Cordova by default. To do so, add the following to the iOS platform in config.xml:
<platform name="ios">
<splash src="res/screen/ios/Default#2x~iphone~anyany.png" />
<splash src="res/screen/ios/Default#2x~iphone~comany.png" />
<splash src="res/screen/ios/Default#2x~iphone~comcom.png" />
<splash src="res/screen/ios/Default#3x~iphone~anyany.png" />
<splash src="res/screen/ios/Default#3x~iphone~anycom.png" />
<splash src="res/screen/ios/Default#3x~iphone~comany.png" />
<splash src="res/screen/ios/Default#2x~ipad~anyany.png" />
<splash src="res/screen/ios/Default#2x~ipad~comany.png" />
<!-- more iOS config... -->
</platform>
Then create the images with the following dimensions in res/screen/ios (remove any existing ones):
Default#2x~iphone~anyany.png - 1334x1334
Default#2x~iphone~comany.png - 750x1334
Default#2x~iphone~comcom.png - 1334x750
Default#3x~iphone~anyany.png - 2208x2208
Default#3x~iphone~anycom.png - 2208x1242
Default#3x~iphone~comany.png - 1242x2208
Default#2x~ipad~anyany.png - 2732x2732
Default#2x~ipad~comany.png - 1278x2732
Once the black bars are removed, there's another thing that's different about the iPhone X to address: The status bar is larger than 20px due to the "notch", which means any content at the far top of your Cordova app will be obscured by it:
Rather than hard-coding a padding in pixels, you can handle this automatically in CSS using the new safe-area-inset-* constants in iOS 11.
Note: in iOS 11.0 the function to handle these constants was called constant() but in iOS 11.2 Apple renamed it to env() (see here),
therefore to cover both cases you need to overload the CSS rule with both and rely on the CSS fallback mechanism to apply the appropriate one:
body{
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
}
The result is then as desired: the app content covers the full screen, but is not obscured by the "notch":
I've created a Cordova test project which illustrates the above steps: webview-test.zip
Notes:
Footer buttons
If your app has footer buttons (as mine does), you will also need to apply safe-area-inset-bottom to avoid them being overlapped by the virtual Home button on iPhone X.
In my case, I couldn't apply this to <body> as the footer is absolutely positioned, so I needed to apply it directly to the footer:
.toolbar-footer{
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
}
cordova-plugin-statusbar
The status bar size has changed on iPhone X, so older versions of cordova-plugin-statusbar display incorrectly on iPhone X
Mike Hartington has created this pull request which applies the necessary changes.
This was merged into the cordova-plugin-statusbar#2.3.0 release, so make sure you're using at least this version to apply to safe-area-insets
splashscreen
The LaunchScreen storyboard constraints changed on iOS 11/iPhone X, meaning the splashscreen appeared to "jump" on launch when using existing versions of the plugin (see here).
This was captured in bug report CB-13505, fixed PR cordova-ios#354 and released in cordova-ios#4.5.4, so make sure you're using a recent version of the cordova-ios platform.
device orientation
When using UIWebView on iOS 11.0, rotating from portrait > landscape > portrait causes the safe-area-inset not to be re-applied, causing the content to be obscured by the notch again (as highlighted by jms in a comment below).
Also happens if app is launched in landscape then rotated to portrait
This doesn't happen when using WKWebView via cordova-plugin-wkwebview-engine.
Radar report: http://www.openradar.me/radar?id=5035192880201728
Update: this appears to have been fixed in iOS 11.1
For reference, this is the original Cordova issue I opened which captures this: https://issues.apache.org/jira/browse/CB-13273
For a manual fix to an existing cordova project
The black bars
Add this to your info.plist file. Fixing the launch image is a separate issue i.e. How to Add iPhoneX Launch Image
<key>UILaunchStoryboardName</key>
<string>CDVLaunchScreen</string>
The white bars
Set viewport-fit=cover in the meta tag
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
There is 3 steps you have to do
for iOs 11 status bar & iPhone X header problems
1. Viewport fit cover
Add viewport-fit=cover to your viewport's meta in <header>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover">
Demo: https://jsfiddle.net/gq5pt509 (index.html)
Add more splash images to your config.xml inside <platform name="ios">
Dont skip this step, this required for getting screen fit for iPhone X work
<splash src="your_path/Default#2x~ipad~anyany.png" /> <!-- 2732x2732 -->
<splash src="your_path/Default#2x~ipad~comany.png" /> <!-- 1278x2732 -->
<splash src="your_path/Default#2x~iphone~anyany.png" /> <!-- 1334x1334 -->
<splash src="your_path/Default#2x~iphone~comany.png" /> <!-- 750x1334 -->
<splash src="your_path/Default#2x~iphone~comcom.png" /> <!-- 1334x750 -->
<splash src="your_path/Default#3x~iphone~anyany.png" /> <!-- 2208x2208 -->
<splash src="your_path/Default#3x~iphone~anycom.png" /> <!-- 2208x1242 -->
<splash src="your_path/Default#3x~iphone~comany.png" /> <!-- 1242x2208 -->
Demo: https://jsfiddle.net/mmy885q4 (config.xml)
Fix your style on CSS
Use safe-area-inset-left, safe-area-inset-right, safe-area-inset-top, or safe-area-inset-bottom
Example: (Use in your case!)
#header {
position: fixed;
top: 1.25rem; // iOs 10 or lower
top: constant(safe-area-inset-top); // iOs 11
top: env(safe-area-inset-top); // iOs 11+ (feature)
// or use calc()
top: calc(constant(safe-area-inset-top) + 1rem);
top: env(constant(safe-area-inset-top) + 1rem);
// or SCSS calc()
$nav-height: 1.25rem;
top: calc(constant(safe-area-inset-top) + #{$nav-height});
top: calc(env(safe-area-inset-top) + #{$nav-height});
}
Bonus: You can add body class like is-android or is-ios on deviceready
var platformId = window.cordova.platformId;
if (platformId) {
document.body.classList.add('is-' + platformId);
}
So you can do something like this on CSS
.is-ios #header {
// Properties
}
In my case where each splash screen was individually designed instead of autogenerated or laid out in a story board format, I had to stick with my Legacy Launch screen configuration and add portrait and landscape images to target iPhoneX 1125×2436 orientations to the config.xml like so:
<splash height="2436" src="resources/ios/splash/Default-2436h.png" width="1125" />
<splash height="1125" src="resources/ios/splash/Default-Landscape-2436h.png" width="2436" />
After adding these to config.xml ("viewport-fit=cover" was already set in index.hml) my app built with Ionic Pro fills the entire screen on iPhoneX devices.
Just a note that the constant keyword use for safe-area margins has been updated to env for 11.2 beta+
https://webkit.org/blog/7929/designing-websites-for-iphone-x/
Fix for iPhone X/XS screen rotation issue
On iPhone X/XS, a screen rotation will cause the header bar height to use an incorrect value, because the calculation of safe-area-inset-* was not reflecting the new values in time for UI refresh. This bug exists in UIWebView even in the latest iOS 12. A workaround is inserting a 1px top margin and then quickly reversing it, which will trigger safe-area-inset-* to be re-calculated immediately. A somewhat ugly fix but it works if you have to stay with UIWebView for one reason or another.
window.addEventListener("orientationchange", function() {
var originalMarginTop = document.body.style.marginTop;
document.body.style.marginTop = "1px";
setTimeout(function () {
document.body.style.marginTop = originalMarginTop;
}, 100);
}, false);
The purpose of the code is to cause the document.body.style.marginTop to change slightly and then reverse it. It doesn't necessarily have to be "1px". You can pick a value that doesn't cause your UI to flicker but achieves its purpose.
I'm developing cordova apps for 2 years and I spent weeks to solve related problems (eg: webview scrolls when keyboard open). Here's a tested and proven solution for both ios and android
P.S.: I'm using iScroll for scrolling content
Never use viewport-fit=cover at index.html's meta tag, leave the app stay out of statusbar. iOS will handle proper area for all iPhone variants.
In XCode uncheck hide status bar and requires full screen and don't forget to select Launch Screen File as CDVLaunchScreen
In config.xml set fullscreen as false
Finally, (thanks to Eddy Verbruggen for great plugins) add his plugin cordova-plugin-webviewcolor to set statusbar and bottom area background color. This plugin will allow you to set any color you want.
Add below to config.xml (first ff after x is opacity)
<preference name="BackgroundColor" value="0xff088c90" />
Handle your scroll position yourself by adding focus events to input elements
iscrollObj.scrollToElement(elm, transitionduration ... etc)
For android, do the same but instead of cordova-plugin-webviewcolor, install cordova-plugin-statusbar and cordova-plugin-navigationbar-color
Here's a javascript code using those plugins to work on both ios and android:
function setStatusColor(colorCode) {
//colorCode is smtg like '#427309';
if (cordova.platformId == 'android') {
StatusBar.backgroundColorByHexString(colorCode);
NavigationBar.backgroundColorByHexString(colorCode);
} else if (cordova.platformId == 'ios') {
window.plugins.webviewcolor.change(colorCode);
}
}
If you install newer versions of ionic globally you can run
ionic cordova resources and it will generate all of the splashscreen images for you along with the correct sizes.
Check out this link, sometimes may be helpful. I could solve the issue with the solution provided below.
https://github.com/apache/cordova-plugin-wkwebview-engine/issues/108
Add
[wkWebView.scrollView setContentInsetAdjustmentBehavior:UIScrollViewContentInsetAdjustmentNever];
before wkWebView.UIDelegate = self.uiDelegate; in CDVWebViewEngine.m

Screen size issue with ionic on iPhone X

I'm trying to export my app in ionic 3. But when I launch in the iPhone X emulator, the screen have 2 empty espaces in the top and bottom (screen problem?).
Anyone help to adapt the resolution to iPhone X resolution?
In order to remove that empty spaces you can add viewport-fit=coverto your meta tag:
<meta name="viewport" content-type="initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
Had the same issue with the Titanium SDK. The issue is that you need to provide the correct launch-screens that adapt the new screen-sizes: -
Portrait: 1125x2436
Landscape: 2436x1125
For Titanium, it was just solved by adjusting the build-script to detect and package the launch-screens, so probably the Ionic team will do something similar soon!
For native Xcode, the issue can be the same and is resolved by placing the correct images into the Asset-Catalog:
Add proper launch images for iphone x Launch image adding help link
Then follow these
For a manual fix to an existing cordova project
UI interface issue
Add this to your info.plist file. Fixing the launch image is a separate issue
<key>UILaunchStoryboardName</key>
<string>CDVLaunchScreen</string>
Set viewport-fit=cover in the meta tag
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
More help
First, add viewport-fit=cover into index.html meta tag
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
then, The statusbar plugin PR has been merged in. Please install the latest stable version of the cordova statusbar.
ionic cordova plugin rm cordova-plugin-statusbar
ionic cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git
Next, add this CSS in your src/app/app.scss:
<style>
.ios.cordova:not(.fullscreen) .bar-header:not(.bar-subheader) {
height: calc(44px + constant(safe-area-inset-top));
}
.ios.cordova:not(.fullscreen) .bar-header:not(.bar-subheader) > * {
margin-top: constant(safe-area-inset-top);
}
div.tab-nav.tabs {
height: calc(49px + constant(safe-area-inset-bottom));
}
ion-content.padding.scroll-content.ionic-scroll.has-header.has-tabs {
top: calc(64px + constant(safe-area-inset-top));
}
</style>
last one,
add a 1125 × 2436 size splash screen for iphone X ,give path of it in config.xml
<splash src="resources/ios/splash/Default#3x~iphone.png" width="1125" height="2436"/>
Cordova plugin statusbar is updated to work for iPhoneX in 2.3.0 Please check the release notes
First, add viewport-fit=cover into index.html meta tag
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
Second add Status bar plugin
cordova plugin add cordova-plugin-statusbar
cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git

Phonegap KeyboardShrinksView and position fixed on iOS not applying correctly

I use the 2.9.0 version of Phonegap and I want that when the keyboard appears my WebView shrinks like it's done in Android phonegap apps. I have footer and header elements in fixed position, and when the keyboard is open it causes trouble (the footer and header loose their fixed position state).
I think the KeyboardShrinksView settings could fix that, according to the phonegap documentation : http://docs.phonegap.com/en/2.9.0rc1/guide_project-settings_ios_index.md.html#Project%20Settings%20for%20iOS
But with a lot of try I'm not able to make it work, the WebView doesn't shrinks.
I was thinking maybe it can come from a conflict between others preferences set on my config.xml :
config.xml
<gap:platform name="ios" />
<gap:platform name="android" />
<preference name="fullscreen" value="false" />
<preference name="webviewbounce" value="false" />
<preference name="orientation" value="portrait" />
<preference name="KeyboardShrinksView" value="true" />
Or maybe it can come from meta tag definition, specially the viewport :
index.html
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
Do you know why it's not working ? Or do you have a workaround for this ?
EDIT : I had seen that it changes something when KeyboardShrinksView=true, but when the keyboard is open, it's hidding the bottom of my content (including my footer and the field) instead of resizing my whole content. I expect it's placing my footer just at the top of the keyboard, am I right ?
Thank you for your help
Yeah - this is a pain to deal with right now. Currently there is no real fix to make things like they used to be in iOS. Personally, I currently juggle two different tags in my apps (one for iOS and one for Android) and it gets close to the old behavior on iOS. Here's what I use:
<!-- IOS --> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />`
<!-- ANDROID --> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1" />
My config.xml settings are what you'd expect:
<preference name="HideKeyboardFormAccessoryBar" value="true" />
<preference name="KeyboardShrinksView" value="false" />
Here are a few links to keep an eye on and to keep bugging (i.e. requesting) that the Cordova folks finally fix it.
Issue CB-4862: https://issues.apache.org/jira/browse/CB-4862 (This is the core issue thread. It was originally closed but after a comment I made a while ago it was reopened)
Issue CB-5852: https://issues.apache.org/jira/browse/CB-5852 (This is where CB-4862 folks were told a possible fix might exist - but initial tests by devs show it's not really a solution sadly).
Hopefully these links will at least help get you up to date w/the latest info on the keyboardshrink related issues. If anyone else has leads/links on this please do share!
I fixed it by calling this code on every page change - :
$('input').unbind('focusout');
$(document).on('focusout', 'input', function() {
setTimeout(function() {
window.scrollTo(document.body.scrollLeft, document.body.scrollTop);
}, 500);
});

Phonegap 3 white flash after splash

I know this has been asked (and answered) several times (Phonegap showing white screen after the splash screen - IOS, Phonegap 2.0 - on app launch a white screen flashes prior to my app loading, how to to kill the white flickering splashscreen at the start of phonegap iOS app?) but none of these solutions seem to be working for me. Maybe because I'm using Phonegap version 3?
I'm only loading Phonegap and jQuery 2.0.0 (other solutions deal with jQuery-mobile which I'm not using) and I'm only targeting iOS for deployment. I've got a splash image loading, then the app displays a white screen (duration varies - I'm guessing it's loading up the app perhaps?) then my index.html loads up my first screen. Here's my current head:
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link type="text/css" rel="stylesheet" href="css/main.css" />
<title>My App</title>
<script type="text/javascript" src="phonegap.js"></script>
<script src="js/lib/jquery-2.0.0.min.js"></script>
<script src="js/main.js"></script>
</head>
I tried adding this to my config.xml (at the same folder level as index.html):
<preference name="backgroundColor" value="0x000000" />
but I still get the white screen flash. I also tried manually hiding/showing the splash with:
function onDeviceReady() {
navigator.splashscreen.show();
}
but that didn't seem to have any effect at all. Anybody have any suggestions?
I was finally able to eliminate the splash flash, but I had to use Cordova to do it. Here are the steps I took:
In Terminal:
cordova create ~/path/to/project “com.appname.app” “appName”
cd ~/path/to/project
cordova platform add ios
cordova build
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-splashscreen.git
cordova build
Use Finder to navigate to ~/path/to/project/platforms/ios/ and double-click projectname.xcodeproj to open the project in Xcode.
Next, I went in and edited the images. You could do it any number of ways. Here's what I did: In Xcode, navigate to Resources/splash/, right-click the image to change, select Show in Finder and use whatever tools you want to change the images.
Once finished, head back to Xcode and open the root-level config.xml (Still not sure why there are two config.xml files, but you want the one furthest out in the folder structure). Update the AutoHideSplashScreen property to
<preference name="AutoHideSplashScreen" value="false" />.
From the Xcode main menu, select Product > Clean and then Product > Build.
Worked for me repeatedly. I was able to then use the navigator.splashscreen.show() and navigator.splashscreen.hide() methods from my app (which didn't seem to be responding without going through all these steps).
Hope this helps!
I have a problem with the plugins or some problem with phonegap so
function onDeviceReady() {
navigator.splashscreen.show();
}
doesn't work for me.
I fixed it by setting the webview alpha to 0 until it's loaded:
3 steps:
in the file "CDVViewController.m" in method "-(void)createGapView" I added:
self.webView.alpha=0;
in the file "MainViewController.m" in method "-(void)WebViewDidFinishLoad:(UIWebView*)theWebView" I added: theVebView.alpha=1;
in the file "MainController.xib" I changed the background to black (set it to any color you prefer).
Now instead of a white screen flash I have a black one until the content is fully loaded.
good enough for me. (although not perfect)
hope this helps..
try Add
<param name="onload" value="true" /> to your SplashScreen feature in config.xml.
This worked for me using build.phonegap.com
Step 1: Added the Slashscreen plugin to your config.xml
<gap:plugin name="org.apache.cordova.splashscreen" version="0.2.7" />
Step 2: Update your config.xml with this preference.
<preference name="auto-hide-splash-screen" value="false" />
Step 3: Added the plugin function call to your 'deviceready' event
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
navigator.splashscreen.hide()
}
</script>
After getting mad with the splash plugin, I find out this solution:
in MainViewController.xib, add a UIImageView (imgView).
put your splash image in it, set scale to fill.
In MainViewController.m, override - (void)webViewDidFinishLoad:(UIWebView*)theWebView
add these code after [super webViewDidFinishLoad:theWebView];
[self.view sendSubviewToBack:imgView];
imgView.hidden = YES;

Resources