I’m trying to use a custom made CSS3 animation on an HTML page

Ionic Framework ionic-v3
1

I’m trying to use a custom made CSS3 animation on an HTML page.

I removed the stock splashscreen and now it’s gone but gray screen extended one more second, making it total three seconds gray blank screen when my app starts.
I tested an Apache Cordova app with splash screen and it has the same gray screen which lasts for three seconds. It looks like all apps built on cordova has this problem regardless of splash screen plugin being installed & used or not.

How can I remove this gray blank screen?

Maybe is this because my HTC phone is from end of 2015? soon I will be obtaining five other more recent android devices to test. Other java & c# apps don’t show this screen on my HTC device.

2

By remove the stock splashscreen, do you mean that you replaced it?

With these animated splashscreen workarounds you still need a static splashscreen that then transitions into the animated one.

1 Like
3 
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="0" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="0" />
<preference name="ShowSplashScreen" value="false" />

This is my splashscreen setting in config.xml.
I exported my app with following command:

ionic cordova build android --release --prod

Now when my app starts, it shows following:

Gray screen for 3 seconds -> animated HTML & CSS3 page for 5 seconds -> app home screen

Before I change that config.xml value, it showed following when my app starts:

Gray screen for 1.5 seconds -> splash screen (either stock version or white blank) for 5 seconds -> animated HTML & CSS3 page for 5 seconds -> app home screen

You can clearly see I had to completely remove splash screen. I don’t want my app’s users to wait for that long when it starts… --prod build along with config fix could erase stock splash screen however now it extended gray blank screen. If I manage to remove that 3 second long gray blank screen, then It will give users a perfect experience just like any other app written in Java or C#…

4

Well, sure. It has to display something while it’s loading, so it sounds like by default that’s a gray screen.

I’ve never seen this gray screen in general myself, even when having a static splash screen.

I think I’d recommend taking a look at Josh Morony’s animated splash screen tutorial, found here.

1 Like
5

That’s strange… because all of apk files built on Ionic, Apache Cordova show this empty gray screen on my HTC smartphone.
I guess that’s because my smartphone is old and perhaps don’t have enough CPU power to render apps quickly? Other java native apps seem to be working fine though…

I created a test app based on Josh Morony’s tutorial too and it had the same problem with gray blank page showing up for 2-3 seconds before that SVG animation screen.

Thanks anyways and more opinions are welcome. Soon I will try to get LG V10 to test things better… all these amazing android smartphones with bad ESN & IMEI number sell for real low cash (under $70) on ebay. They’re good for testing.

6

I did some googling, and found somebody on SO who is describing a seemingly similar issue.

I found a (recentish) response a bit down the page:

(Replacing PhoneGap with Cordova, of course)

Not sure if it works or not, just because as I’ve said I’ve not seen the intermediate screen.

1 Like
7

Thanks, I will try this although the gray screen I see on my phone doesn’t have any taskbar on top nor black color.
This is a gray blank screen which pops up as soon as my app starts… which I find to be not professional and strange.

8

Just did some tests and it doesn’t seem to work as written in Cordova.

For a quick and dirty solution you can try modifying the AndroidManifest.xml file.

Otherwise you’ll want to install the cordova-custom-config plugin

Then put
<preference name="android-manifest/application/activity/@android:theme" value="@android:style/Theme.Translucent.NoTitleBar" />

Inside of the <platform name="android"> element in config.xml.

1 Like
9

I’m thinking this gray screen is the native Webview window that is displayed for a couple seconds before cordova kicks in and takes over rendering. So I’m thinking that playing around with the @android:theme might help to at least alleviate some of the awkwardness, but unfortunately I’m not sure that there’s a way to “fix” it, at least assuming I’m correct in my thinking.

1 Like
10

Thanks, will try this tonight when I get a chance.
This gray screen should be permanently removed from Cordova series. I don’t see any point of them showing up on start.
It would be amazing if someone creates a native splash screen plugin which can use HTML & CSS3. That will solve problems for everyone. Maybe one day I will try to create if I make some $$$ from Ionic app I’m developing.

1 Like
11

Unfortunately that’s not possible. Splashscreens have to be static images, even in Native. Most major apps just do tricks like the method suggested in the previous two articles.

What would you have in place of the Gray screen? It has to display something, as unfortunately it does have to load things first.

12

Other apps built on Java don’t have this gray screen. They have custom made loading screens but not this blank gray screen.
I decided to not learn Java because Android Studio takes forever to emulate android OS on my laptop.

I’m considering Xamarin at one point… once I build a stable app with Ionic and things work out fine then I will start studying Xamarin which is based on C# but has great support & tutorial materials from Microsoft.

Ionic does what I intended to do now and I think it’s amazing… but it has some issues with splash screen. I will try your suggestion later night once I get off from work place.

13

but in my case grey screen cames after splashscreen