Css does not render correctly at the first time of app openning

Ionic Framework ionic-v3
1

At the first time of app opening of app installation, css doesn’t render correctly.

From the screenshot below, tool bar css doesn’t render correctly.
This problem gets resolved after complete close and reopen the app.

The test is done in xCode & genimotion & real device(android, ios).
All test shows same result.

image
Screen Shot 2017-06-19 at 11.22.45 AM.png533×758 13.1 KB

Logic of the app.

  1. get currentLocation (lat, lng)
    2.1. if(1 = true) compute data
    2.2 if(1 = false) skip compute data
  2. render slider

Ionic info

global packages:

    @ionic/cli-utils : 1.4.0
    Cordova CLI      : 7.0.0 
    Ionic CLI        : 3.4.0

local packages:



    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.4.0
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : android 6.2.3 ios 4.4.0
    Ionic Framework                 : ionic-angular 3.3.0

System:

    Node       : v6.11.0
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b 
    ios-deploy : 1.9.0 
    ios-sim    : 5.0.9 
    npm        : 3.10.10

Anyone can help me on this?

The app is already posted on the google play store, hopping users to reload app after installation.

2

Complete guess, but I suspect a race condition whereby you are attempting to access platform functionality before the platform is ready.

3

Thanks for reply.
This only happens at the first time of app installation.

After the first run(completr close and reopen) the app works perfectly.

4

The thing about race conditions is that they present as “phase of the moon”. You think you have narrowed down the conditions, but you haven’t. Again, I don’t know that this is what is going on in your situation, but that is where I would look.

5

What should it look like? You only showed us the broken state.

Did you remote debug the problem on the device already?
Follow these instructions here to debug the problem in Safari dev tools: https://ionic.zone/debug/remote-debug-your-app#ios
Follow these instructions here to debug the problem in Chrome dev tools: https://ionic.zone/debug/remote-debug-your-app#android
Look at the console and network tabs for errors.

6

I have finally solved the problem. But not sure this really caused the problem.

Problem:

  1. App does not start correctly (css doesn’t render correctly) at the first time of app running of app installation.
  2. App works fine after the first round (complete close & reopen).

Solved by:

  1. I had a mistake of use of Storage. I put object in the value without JSON.stringify(Object).
  2. Corrected the Storage usage with JSON.stringify(Object) and JSON.parse(string)

BUT,
I don’t understand why this caused the css rendering problem.
If the usage of Storage went wrong, console would spit out errors about Stroage or data null.

Anyway, thank you very much for your helps.

Thank you.

7

This is not the answer. You are cargo culting a race condition.

8

I also agree that this isn’t the answer.

You said “You are cargo culting a race condition.” but, i am handling asynchronous functions with Promise.

I am reviewing the source code, but not sure what really caused the problem.
Maybe you are correct. and I have missed in some part, but can’t find where.

Thank you very much