White flash and transition issue on Jquery Mobile & Phonegap 3 - jquery-mobile

I hate to ask a question that has been asked before, but I am suffering from the white flash when transitioning from the splash screen to main page on IOS (no flashes at all on android), and I have tried all the other suggestions listed in other posts (Phonegape 3 white flash after splash screen ), and none of them worked.
In fact, the suggestion of manually adding in the splash screen plugin and using the splashscreen.show / hide actually has made things worse, the white flash now stays present for 3-5 seconds before moving to the main page.
I've also noticed that my app seems to be ignoring the
<preference name="AutoHideSplashScreen" value="false" />
command, as I have this set in the config.xml file, and the splashscreen shows when the app launches, stays up for a few seconds, and then moves on, when the expected behavior is that it would stay up indefinitely (until I tell it to go away via the splashscreen.hide() command).
Would anyone have any other suggestions for removing or drastically reducing the white flash after the splash screen?
thanks!

Have you tried including the following config.xml values if they aren't already there?:
<preference name="FadeSplashScreen" value="true"/>
<preference name="FadeSplashScreenDuration" value="0.7"/>
<feature name="SplashScreen">
<param name="ios-package" value="CDVSplashScreen" />
<param name="onload" value="true" />
</feature>
I had the same problem a few weeks ago and adding these fixed it for me.

Related

Gray background on scroll in a Cordova iOS App

I'm working on a mobile app using Phonegap/Cordova.
I built the ipa file using Phonegap Build and installed it on my iPhone.
I noticed when I scroll up or down at the edges of the view (like iOS bounce scrolling), the whole application view scrolls down (or up) and a gray background color appears.
I tried finding if there's a CSS code for that, but no luck.
I'm guessing maybe its something related to view-port.
Things to Consider:
- I'm using Framework7 v3
- PhoneGap Build cli-6.5.0
- iPhone 6S Plus
Screenshots of the issue:
What can be done to fix this bug?
Add the following to to your config.xml and then run cordova prepare:
<platform name="ios">
<preference name="DisallowOverscroll" value="true" />
<preference name="UIWebViewBounce" value="false" />
</platform>

Using StatusBar plugin works on simulator, not device

I'm at my wits end at this point, trying to get past the IOS7 issue whereby the statusbar overlaps the top of my app. The steps I've taken are:
phonegap plugins add org.apache.cordova.statusbar
Adding the following to my main config.xml:
<gap:plugin name="org.apache.cordova.statusbar"/>
<preference name="fullscreen" value="true" />
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarStyle" value="default" />
<feature name="StatusBar">
<param name="ios-package" value="CDVStatusBar" onload="true" />
</feature>
From reading various SO posts, I've tried several times adding/removing both the plugin and the ios platform.
The plugin now successfully adjusts the status bar behavior on the simulator (running cordova run ios) but when I use Phonegap Build to actually run it on the device, alas the status bar still overlays my app webview.
Thanks in advance for the help.
You can open up MainViewController.c (I think that's what it's called in Cordova), find the viewDidLoad: method and insert code like this:
if (IS_IOS7_OR_LATER) {
CGRect *frame = self.webview.frame;
frame = CGRectMake(0, 20, frame.size.width, frame.size.height);
self.webview.frame = frame;
}
where IS_IOS7_OR_LATER is a macro or some other code to check if we're running on iOS 7 or later.

Ionic remove white blank space above keyboard

I am building an app using ionic framework. I got two issues.
I am getting a blank white space above keyboard.
White screen appears after splash screen and before app loading. I have tried the below mentioned code. But no use of it.
<preference name="ShowSplashScreenSpinner" value="false" />
<preference name="AutoHideSplashScreen" value="false" />
How to avoid the white screen before app loading and how to avoid the blank space above the keyboard transition.
Thanks,
Raj.

Cordova iOS Splash Screen

I can't make the splash screen stay until the page is loaded.
I have read every entry in the first, second and third page of google search. I read all the questions posted here on stackoverflow including A good explanation but none seem to work.
What's worse is that the behavior I'm seeing is all wrong. Following the instructions here I added alert at the deviceready event and I saw it happens after the white page is gone and my initial page is loaded.
I installed the plugin and included the following in the root level config.xml:
<feature name="SplashScreen">
<param name="ios-package" value="CDVSplashScreen" />
<param name="onload" value="true" />
</feature>
<preference name="AutoHideSplashScreen" value="false" />
I am still getting Splash->White screen->My initial page.
I am using Cordova 3.3.0 with ionicframework.
What am I doing wrong?
EDIT
I think it might have something to do with this error message:
The splashscreen image named Default-Portrait was not found
I have just had the same issue and found that Gopal's answer was not the solution (as I already had my files named and sized correctly).
Instead I found this answer to be correct: Cordova 3.4 iOS white screen after splash
Alternate solution in brief:Duplicate your "Default#2x~iphone.png" and rename it to "Default-Portrait#2x~iphone.png". Then drag that file into your Project Files in XCode under "Resources/Splash" so that it is recognised when Xcode builds.
If cordova-plugin-splashscreen can not find images, you can specify UILaunchImageFile key in plist.
<key>UILaunchImageFile</key>
<string>LaunchImage</string>
Gorpal said in a comment
Please make sure you are using right names and size of splash screen. Default-Portrait~ipad.png -- 768 x 1004 Default-Portrait#2x~ipad.png - 1536 x 2008 Default~iphone.png - 240x 320 Default#2x~iphone.png - 640x960 Default-568h#2x~iphone.png - 640x1136
which worked for me. It's all about the correct name.
For me I just added the key, Launch Image on the Info tab, similar to Nikita's answer:

Full screen scroll (IOS)

I have made an iOS application using PhoneGap Build, Which works fine. I am having some kind of problem while scrolling a page. When I scroll from bottom or from Top whole screen moves. Is there any way to prevent this,as I know this is iOS feature. Which is very nice but in case of my application I do not want this. So help me out.
Use this in you config file:
<preference name="DisallowOverscroll" value="true" />
<preference name="webviewbounce" value="false" />

Resources