Show blank screen on android after update from RC2 to RC3 with production build

Ionic Framework ionic-v3
1

Hi,

My project show blank screen on android device after update to RC3 and with production build.

Here is my situation

production build

rc2 is worked on android and ios device
rc3 show blank screen on android device
rc3 is worked on ios device

dev build

rc2 and rc3 are worked on android and ios device

my package.json
"scripts": {
“ionic:build”: “ionic-app-scripts build”,
“ionic:serve”: “ionic-app-scripts serve”
},
“dependencies”: {
"@angular/common": “2.1.1”,
"@angular/compiler": “2.1.1”,
"@angular/compiler-cli": “2.1.1”,
"@angular/core": “2.1.1”,
"@angular/forms": “2.1.1”,
"@angular/http": “2.1.1”,
"@angular/platform-browser": “2.1.1”,
"@angular/platform-browser-dynamic": “2.1.1”,
"@angular/platform-server": “2.1.1”,
"@ionic/storage": “1.1.6”,
“ionic-angular”: “2.0.0-rc.2”, // just change here to 2.0.0- rc.3
"ionic-native": “2.2.6”,
“ionicons”: “3.0.0”,
“rxjs”: “5.0.0-beta.12”,
“zone.js”: “0.6.21”
}

Have any advice?

2

debug your device… in remote inspector in google chrome.

And you should also update the ionic app-scripts

3

Hi bengtler,

Thanks for your advice.

I found a strange thing that the root tag “ion-app” apply a style : opacity: .4 .

My screen is not blank any more after unchecked “opacity: .4” in debug tool.

I down’t know why and how to fix it .

image
2016-11-29_19-35-29.png800×734 84.7 KB

4

I’m seeing the same exact thing - glad to know I’m not crazy! Here’s my ionic info output:

 ordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.13
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.46
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7
Node Version: v6.9.1
Xcode version: Not installed

I noticed that ionic2-app-base for rc3 does list ionic-app-scripts dependency as 0.0.45, so maybe I’ll try rolling that back.

Please let me know if you can across any other solution

5

App-scripts 0.0.45 made no difference.

In my case, the offending style rule appears to be one with selectors generator for every color in my $colors sass variable, with permutations for EVERY ionic element that they could be applied to. For some reason Chrome Dev tools claims that this style is being applied even to the tag, but it doesn’t look like that would match any of the selectors.

Copy/pasting the selector list into VSCode, it is 395357 characters, and does not contain “html”, “body”, or “ion-app” as complete words, all of which elements show that they are affected by this rule in dev tools.

6

Ok, sorry to spam this thread, but I went into variables.scss and removed a number of colors from $colors that I wasn’t using, saved the file, ran ionic platform remove android and then ionic run android and now the app displays correctly. (I’ve been removing and re-adding the android platform with all of the previous things I’ve tried, so that shouldn’t have been what fixed it)

In the remote debugger I no longer see the “every color combination with every kind of button possible” style showing up, but a search through www/build/main.css for “opacity:.4” shows that this style rule is still being generated.

Maybe I actually had so many colors defined that the generated rule was somehow too long for the webview’s css parser to handle?

1 Like
7

Hi Subaru,

Thanks for your information.

It’s works for me after I removed a lot of colors from $colors in variables.scss .

8

Hi,

We have the same problem on Android. It seems that everything has become transparent.

9

Thanks for pointing me in the right direction.
I have 35 colors defined in the $colors section in variables.scss. There is also a list of all social networks we might support in the future (but just not yet). Thanks to that, I could remove 19 colors from the list. After doing this, it worked fine.

I saw that, with all 35 colors in the list, the generated main.css was 5.1MB in size. After removing 19 colors, the generated main.css is ‘only’ 1.5MB. I have the impression that a lot of stuff is generated for every color in the list. I don’t know if this is a good idea or not… A minified CSS file of +5MB seems to be a bit large compared to the CSS I wrote in the source code (max 500 lines of myself).

Anyway, it looked like a strange solution and my hope wasn’t too high, but it worked. Thanks!

10

This workaround fixed the error for us as well. However, I consider this a workaround, and this should be fixed in the future.

Something in the optimization seems to go wrong, as the dev build works fine even with many colors defined.

11

Thanks @DCI_Subaru,

your solution saves my day. Anyway I agree with @wberger that this is just a workaround.

Hope it will be fixed in the future.