Style broken in android apk build

[tom5677]

I’m working on a ionic v3 app which were actually already working on ios and android.
Suddenly in the native android app the style is broken. It seems, that some css stylings are not applied.
I’ve tried already lot of things:

• tried on different android device
• debug and prod build
• build locally and via ionic pro
• remove add android platform
• upgrade cordova-plugin-ionic-webview to 2.1.0

No success.
No error in build process identified.

Screenshots:
This is from ionic serve and OK (looks also good on iOS device)

This is from an android device where the style is broken.

My ionic info

Ionic:

   ionic (Ionic CLI)  : 4.8.0 (C:\Users\tk\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.1

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : cordova-plugin-ionic 4.2.0, cordova-plugin-ionic-webview 2.0.0, (and 7 other plugins)

System:

   Android SDK Tools : 26.1.1 (C:\Users\tk\AppData\Local\Android\Sdk)
   NodeJS            : v6.11.4 (C:\Program Files\nodejs\node.exe)
   npm               : 3.10.10
   OS                : Windows 10

My plugins:

cordova plugin ls
cordova-plugin-device 1.1.4 "Device"
cordova-plugin-file 6.0.1 "File"
cordova-plugin-ionic 4.2.0 "IonicCordova"
cordova-plugin-ionic-webview 2.0.0 "cordova-plugin-ionic-webview"
cordova-plugin-nativestorage 2.3.1 "NativeStorage"
cordova-plugin-splashscreen 5.0.1 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.1 "Whitelist"
ionic-plugin-keyboard 2.2.1 "Keyboard"

Cheers,Tom

[mhartington]

Hi there! Hmm, could you attach the chrome dev tools ands see if there are any errors?

This is a bit of an older video showing how to debug, but still relevant

[tom5677]

Sure. Thanks! I’ll run through it and send it across.

Btw. the style is broken in the DevApp on Android device as well.

This is logged in the console: (maybe it helps)

[app-scripts] [18:25:05]  console.log: deviceready has not fired after 5 seconds.
[app-scripts] [18:25:05]  console.log: Channel not fired: onDOMContentLoaded
[app-scripts] [18:25:28]  console.log: Ionic Pro initializing (app id: %c3e58f324%c) color: blue color: black
[app-scripts] [18:25:29]  console.log: Angular is running in the development mode. Call enableProdMode() to enable the production
[app-scripts]             mode.
[app-scripts] [18:25:30]  console.log: Ionic Native: deviceready event fired after 1322 ms
[app-scripts] [18:25:30]  console.error: Error loading deploy information. [object Object]

[tom5677]

What I found out is, that the class is present in the html, but in the style inspector it is not showing up: (card-col-text-medium-center)

From challenges.scss:

page-challenges {
...
          .card-col-text-medium-center {
            text-align: center;
            vertical-align: middle;

            font-size: 1.6rem !important;
            font-variant: small-caps;
            font-weight: bold;
            color: color($colors, dark);
          }
...
}

Let me know what kind of information you need next.
Thanks!

[rhanesoghlyan]

Hi @tom5677 could you please provide size of your main.css file ?

[tom5677]

Hi @rhanesoghlyan the main.css inside the apk is 3192 KB (app-master-896e7e-debug.apk.zip\assets\www\build)

[rhanesoghlyan]

My CSS file size is very big. I thought that the problem could be caused by this.
So we can exclude this options also.

[tom5677]

Well, the main.css in the apk is compressed. Un-zipped it is around 34 MB. So quite normal. I assume that it might be a problem with the webview, because in DevApp on Android the style/css is broken as well.
Let’s wait for the response and support from Mike @mhartington.

[tom5677]

Reducing the CSS to around 1,5MB solved my issue. I’ve accomplished that with removing (lots of) unnecessary entries in the color map in variables.scss.