PDA

View Full Version : Killing white screen after splash screen load



dankhan
12 Oct 2010, 12:15 PM
I've noticed when running my app as native on a phone (phonegap again) that after my custom splash screen finishes, there's a noticeable white background for about 1 second before the WebUIView loads up my sencha app. I can't seem to control this through normal CSS background colours. I'm guessing it's Webkit's default background colour until it's loaded up the stylesheet. Anyone else come up with a solution here or do we have to just live with this?

On that note then, is there a way to show all of my ext components once they've been rendered and positioned? Currently I can see them all being rendered and shifted into place on my device - OK, it's only like 500ms, but you know us engineers are perfectionists eh?

Cheers,
-Dan

nrevelle
3 Jan 2011, 12:03 PM
Did you find a solution/workaround for this?

steve1964
4 Jan 2011, 12:53 AM
White screen on iOs and black screen on Android are the default webui color, try to change the background body color in your html, it's working for me. You see the white screen because the webui wrapper of phonegap is loading the app stuffs (js, css, image) from the device.

nrevelle
13 Jan 2011, 1:14 PM
I'm hoping to get an image or text to let the user know the site is still loading.

alexobenauer
13 Jan 2011, 1:46 PM
Here's the problem: iOS pulls your splash screen once the entire page is "loaded" which, for simple html + css webpages, works great. When it's downloaded, it's viewable, and it is a seamless transition.

With Sencha Touch, all the code has downloaded, the splash screen goes away, but it takes a couple hundred milliseconds to a few seconds to run all the javascript code necessary to build the interface, depending on how complex the interface is.

Technically speaking, this is unavoidable. There is no way to tell iOS to hold the splash screen up for longer, and, for now, the iOS CPU can't make a 1 second javascript code run in 0 seconds, unless if some nice hack were built in to Sencha (or on to it).

Theoretically, you could make a loading screen, put it up in HTML + CSS *only* that floats above all the Sencha touch elements, and after your interface is finished loading, it removes it. Try it out, and let us know how it goes. The only problem is that your splash screen and that loading image should definitely match so that the user doesn't see flashes of different startup screens.

Also, I could be wrong on this completely so correct me if I'm wrong, but in my experience this is the problem, and in my opinion, the easiest solution.

qualutions
21 Jan 2011, 1:11 PM
I'm having the same issue here. The proposed solution (PMalexobenauer) makes sense but if I undersand it correctly just minimizes the issue as the html/css still needs to load.

would love a solution that hit at the crux of the issue.

Ben

iamcam
1 Feb 2011, 9:09 AM
I tried a quick 'n dirty proof of concept that seemed to work well: Set the body background image to you splash screen (or something). I used inline css and it seemed to work great considering I didn't have to do anything special. I'll probably end up either using the same splash image, or a photoshop blank UI from a screenshot so it looks like ST fills in all the UI elements as it loads.

qualutions
1 Feb 2011, 9:15 AM
I worked with a nitobi on this issue (for android) and they recognized that this is a bug in PHongap and have an issue opened on it. Since I was only working with android i didn't know if it was happing for iphone app as well.

here is a link to the issue in lighthouse

http://phonegap.lighthouseapp.com/projects/20118-android/tickets/78

iamcam
1 Feb 2011, 9:34 AM
Sure, this could be a PhoneGap thing, but maybe this is just a javascript thing. I think alexobenauer probably hit the nail on the head because I get a smooth transition from splash screen to my background when I put one in. ST then loads a moment later. It's not that there's a bug in PhoneGap, it's that ST takes a little bit of time to render the app.

iamcam
1 Feb 2011, 5:38 PM
I spoke too soon... Here's a screen capture of what's going on.
http://screencast.com/t/TdBQfgrgfQS8

I'm using this in my index.html file to test it:
<style>
#hover, body {
position: absolute;
z-index: 10000;
width: 320px;
height: 460px;
background-image: url(resources/loading.png);
background-repeat: no-repeat;
background-position: 0 0;
background-size: 100% auto;
}
</style>

<body style="position: absolute;
background-image: url(resources/loading.png);
background-repeat: no-repeat;
background-position: 0 0;
background-size: 100% auto;"><div id="hover"></div></body>
</html>

Essentially what I've done to demonstrate the white flash is to set the background and a div that overlays the content to the same image, loading.png, which is more or less 'shopped to look like a blank UI. In this example, the loading.png image is supposed to stay once the app is loaded. What happens is that there's a flash of white between seeing the loading.png appear twice (before and after).

Second test: set the background color (no image):

<style>
#hover, body {
position: absolute;
z-index: 10000;
width: 320px;
height: 460px;
background-image: url(resources/loading.png);
background-repeat: no-repeat;
background-position: 0 0;
background-size: 100% auto;
}
</style>

<body style="background: #f00;"><div id="hover"></div></body>
</html>
This time we see the div with loading.png background on #hover, followed by a red flash (the styled body element), followed again by the loading.png.
http://screencast.com/t/8qWOEVoDarv

So, I'm not really sure what's going on here, but my guess is that it's NOT a Phonegap issue, but rather a Sencha Touch issue.

Can any of the devs confirm?

iamcam
1 Feb 2011, 10:46 PM
Sorry for the string of replies. This is the best I could come up with is pretty simple, though maybe not the most optimal for every circumstance. I'm using inline styling for convent testing



</head>
<body style="background-image: url(resources/loading.png);"></body>
</html>

In fact, leaving out background-repeat seems to make the biggest difference. There's still a very slight flash between the loading.png file and the rendered UI, but it's MUCH better than the white screen. If you use a screenshot for your background, you'll have to have several available depending on the device resolution - best handles with CSS media queries, IMO.

rballman
2 Feb 2011, 5:32 PM
I am having the same issue. a fix would be nice :D

direct00
17 Feb 2011, 2:12 PM
Same issue here as well. We're going to try the background image fix. ~o)

salon software stephen
17 Feb 2011, 2:30 PM
I too would love a solution to this problem.

MusiX
11 Mar 2011, 9:16 AM
Same problem here, a fix would be great.

mr.xprt
5 May 2011, 1:17 AM
same problem :(

chrigu
26 Jun 2011, 8:42 AM
Hi guys,

Actually I don't know if till now someone fixed the problem in a non-hacky way because I could not find any solution.. so I created a small Phonegap-Plugin which helped me to solve this issue.

Unfortunately you have to add a small modification to your phonegap library but at least it's working perfectly.

You can download my plugin here: https://github.com/chrigu-ebert/SenchaHelperPlug
hope this help others :) If someone found a better solution please tell me!

Hanni Sullivan
28 Jun 2011, 2:03 AM
@chrigu: Big up for your effort. I will give your solution a try once I have fixed the more important issue in my project.

chrigu
28 Jun 2011, 11:02 PM
Thanks, I will soon post a nicer solution without needing to hack the phonegap library anymore :)

headkit
9 Aug 2011, 2:41 AM
any news here with phonegap 1.0?

steve1964
9 Aug 2011, 2:56 AM
Hi, for iOS there is a Phonegap Plugin to solve this issue:
https://github.com/phonegap/phonegap-plugins/tree/master/iPhone/SplashScreen

headkit
9 Aug 2011, 3:42 AM
yes, I think i used this one before, but does it work in phonegap 1.0?

mmigdol
9 Aug 2011, 8:47 AM
PhoneGap 1.0 has a built-in SplashScreen plugin that removes the need for chrigu's plugin.

From the release notes:
"New PhoneGap.plist options: AutoHideSplashScreen (bool=true), ShowSplashScreenSpinner (bool=true). If AutoHideSplashScreen is false, you can control hiding the splash screen in JavaScript by calling navigator.splashscreen.hide()"

Regards,
Michael

headkit
9 Aug 2011, 11:46 AM
yea, this sounds promising, thnx!

headkit
10 Aug 2011, 12:14 AM
hm, doesn't see a spinner anywhere...

headkit
10 Aug 2011, 3:48 AM
but hey, the "navigator.splashscreen.hide()" works well. so thanxalot!

AbhishekKanitkar
23 Aug 2011, 5:50 AM
What would you suggest for Android ?
How to fix this issue for Android devices ?

imwill
27 Aug 2011, 6:44 AM
I would also like to know how to fix this with PhoneGap+Android :s

coolate
12 Oct 2011, 8:44 PM
this is the fix I used
http://shazronatnitobi.wordpress.com/2011/09/15/ios-phonegap-splash-screen-control/

senchan
12 Dec 2011, 1:40 AM
Still looking for android fix :/ ...

msrewp
30 Jan 2012, 1:41 AM
I tried the script here: http://shazronatadobe.wordpress.com/2011/09/15/ios-phonegap-splash-screen-control/. But when I put it in my project code, I get a blank screen between splash screen hide & map display. Below is the code I have, please suggest how to eliminate the blank screen…
setTimeout(function(){

navigator.splashscreen.hide();
Ext.dispatch({
controller: HC.controllers.hcController,
action: ‘showMap’
});
console.log(‘after dispatch’);
}, 2000);

I changed t he delay to 7seconds, still there is intermediate blank screen. Anybody came across similar issue and got it fixed?
Please advice.

tavojavi
28 Aug 2013, 11:26 AM
Hello, did somebody find a safe/ best practice way to avoid the white screen?? it´s 2013, and we are still having the same issue...

thanks!

chrigu
28 Aug 2013, 11:25 PM
Hello, did somebody find a safe/ best practice way to avoid the white screen?? it´s 2013, and we are still having the same issue...

thanks!

Hi tavojavi

Yes, in the meanwhile quite some things changed. You now have a Phonegap/Cordova built-in plugin to controll the splash screen. See http://docs.phonegap.com/en/2.2.0/cordova_splashscreen_splashscreen.md.html

So you can show the splash screen as long until your application is fully loaded and hide it afterwards with:


navigator.splashscreen.hide();


Hope this helps!

Best,
Chrigu

tavojavi
31 Aug 2013, 4:22 PM
Amazing!!

Thanks chrigu (http://www.sencha.com/forum/member.php?284834-chrigu)


Hi tavojavi

Yes, in the meanwhile quite some things changed. You now have a Phonegap/Cordova built-in plugin to controll the splash screen. See http://docs.phonegap.com/en/2.2.0/cordova_splashscreen_splashscreen.md.html

So you can show the splash screen as long until your application is fully loaded and hide it afterwards with:


navigator.splashscreen.hide();


Hope this helps!

Best,
Chrigu

chrigu
3 Sep 2013, 9:08 AM
Amazing!!

Thanks chrigu (http://www.sencha.com/forum/member.php?284834-chrigu)

you're welcome :)