Ionic 3: Part of css not working on Android platform

#1

After building app for Android platform part of css not working.
We didn’t change any dependencies. And problem we have only in some Android devices.

For example we have 2 Samsung Galaxy s8 devices (Android version - 8.0.0)
In one device it works but in other not

in iOS platform all works well

#2

It seems, that I have a similar issue: Style broken in android apk build

1 Like
#3

Do you have any idea how can we fix this ?

#4

Not really. Did you try to debug with chrome and android device in order to see which css elements are used?
Maybe it has to do somenthing with the dependencies. I’ve created an apk in the ionic cloud (based on the git push). This apk doesn’t work as well. So doesn’t seems to be a “local issue”.
Which version of cordova-plugin-ionic-webview are you using?

#5

Yes, I’ve debugged app with chrome and part of css working well but other not working. And there is no logic :slight_smile:

There is my dependencies

"@angular/common": "5.2.9",
"@angular/compiler": "5.2.9",
"@angular/compiler-cli": "5.2.9",
"@angular/core": "5.2.9",
"@ionic/app-scripts": "3.1.8",
"@ionic-native/core": "~4.12.0",
"cordova-android": "6.4.0",
"cordova-plugin-ionic-webview": "^2.3.2",
#6

Can you share a screenshot? What part of the CSS is not working?
How could I replicate this issue?

Can you also see if there are any issues in the chrome dev tools when you deploy to the device?

#7

Unfortunately I can not provide screenshots from the app. I’ve debugged it and noticed that some CSSes are missing (for clarification: the appropriate class names exist but the relevant styles are missing in main.css file). There is no any logic which CSSes exist which don’t.

#8

Can you recreate the issue in a demo app? Just something made with the CLI and push to github. Otherwise, it’s hard to debug. I’ve created an app on my end, and everything appears to be working as expected.

#9

I’ll create a demo app and will try to reproduce this issue. Thanks for your response

#10

I’ve checked CSS file in .apk file and all styles are exist in my main.css file.
But during the debugging it can not find some part of CSS styles.

@mhartington what do you think about this ? Maybe it’s related with caches ?

In demo app with the same dependencies we can not reproduce this issue.

#11

Bingo! It really looks like a cache issue. I’ve installed the apk on another Android device and: bang: it works as expected - no styling issues.
Now the question: How to clear the (which?) cache?

#12

Yes this problem is not actual in all Android devices.
As I told before I have 2 Samsung Galaxy S8 devices (Android version - 8.0.0)
On one device it works but on the other one doesn’t.

#13

@tom5677 this issue related with size of CSS file. You need to optimize your CSS code.
For optimization you can use this article https://julienrenaux.fr/2017/07/20/optimized-ionic-angular-css-bundle-for-pwas/.

#14

Ahh. Actually I’ve tested it on another Samsung Galaxy S8 as well. There it worked. On one Galaxy s7 not and another it worked. I’ll share the details later. On devices with dev tools enabled it didn’t work