Weird app behaviour on first run [iOS / Android]

[Jure_C_]

I have HTML5 + CORDOVA + Ionics project, INTEL XDK version is 1995.

Application loads data and it position(x,y) from web API. Some users (Android and iOS) reported that when they first run the app data was misplaced.

This is what they see:

And this is how application should look:

When they terminate application and load it again it looks normal. Does anyone have any idea why this is happening to some people and for others work normaly?

Also on iPhone 4, not sure about newer models, splash screen is vertical when it should be horizontal. When showing splash screen, status bar is already horizontal.

Regards

Jure

[PaulF_IntelCorp]

Do you know which version of iOS are experiencing the problem? Only iOS 6, for example?

Regarding Android, are you using Crosswalk to build your Android app? The native Android webviews are highly variable in features and behavior. We highly recommend you use Crosswalk to get consistency across apps.

[Jure_C_]

iOS version with problem is 8.3

Android version which i was building before was just Android. Now I built crosswalk, tested it on 2 diffrent mobile phones and it looks like this now:

It looks like that wrong screen size is set. I tried adding app directive from this link: http://jsfiddle.net/jaredwilli/SfJ8c/ , but I had no success.

[PaulF_IntelCorp]

Try using the Crosswalk 12 build, not 11 (which is what I'm guessing you are using). There are some layout issues with 11. Set the Crosswalk version number in the build settings.

[Jure_C_]

I checked the settings and it was version 10. I will try to build it with 12.

Do you maybe have idea what is the problem with iOS? Because that is our biggest problem. Could be connected with setting iOS target version to 7.1?

EDIT: I got information from another user that on his iPhone 6 and iOS 8.3 application runs like it should. So what could make a diffrence on a same phone and same iOS?

[PaulF_IntelCorp · Accepted solution]

Are all of your resources stored locally in the app? Or are you pulling pages and CSS and JS from a web site? Application resources should be local, part of your project. Information your send or receive from a server should just be data (for example, JSON or XML or whatever works for your app).

Is it possible you're not waiting for the app to be fully initialized before updating the divs with data? It can take several seconds for some device webviews to be fully initialized... See the HTML5+Cordova blank template, the init-dev.js file has a conservative "ready" detection that you can use to make sure that everything is ready before you actually start your app.

[Jure_C_]

I visited my client so that I could test it on his phone and I discovered that splash screen woulden't even show, but application would start directly. So I had moved call to one of angularjs methods to ondeviceready and inculded init-dev.js and it worked.

Before that I tryed using some othed cordova.js file and application worked, but the plugins didn't. So problem solved. Thank you.