Ionic 4: global.scss cause blank screen - only to browser

I’ve read the doc, searched for GitHub all open and closed issues and other sources but can’t solve this issue.

Specifically, inside global.scss there is the line @import '~@ionic/angular/css/structure.css' that gives blank screen without throwing any error when compiling to browser (Chrome), but works fine when compiling to Mobile (Capacitor + Android Studio + physical device).

Workaround: I have to commented out that line to make it work on Browser, but on Mobile I lose the structure of this specific global stylesheet and therefore all predefined CSS structure.

Not sure how I can solve this issue without the need to comment such line.

Ionic:

   ionic (Ionic CLI): 5.2.3
   Ionic Framework: @ionic/angular: 4.4.2
   @angular-devkit/build-angular: 0.13.9
   @angular-devkit/schematics: 7.3.9
   @angular/cli: 7.3.9
   @ionic/angular-toolkit: 1.5.1

Capacitor:

   capacitor/cli: 1.0.0
   capacitor/android: 1.0.0
   capacitor/core: 1.0.0

System:

   Android SDK Tools: 28
   NodeJS: v11.15.0
   npm: 6.10.1
   OS: Windows 10 Version 1089 (OS Build 17763.615)
   Android Studio: 3.4.2

Hi, I had a similar problem with a white screen caused by global.scss, specifically because of ~@ionic/angular/css/structure.css" in it.

I have a loading spinner that gets set up on index.html. Without ‘structure.css’:

  1. index.html loaded: loading spinner is visible
  2. app bootstrapping: loading spinner is still visible
  3. finished bootstrapping: main app is visible.

But with ‘structure.css’:

  1. index.html loaded: loading spinner is visible
  2. app bootstrapping starts: loading spinner is still visible
  3. sometimes after styles.js finished loading: HTML page completely white
  4. it now stays completely white for some time
  5. Very closely to the end of the complete bootstrapping, the loading spinner appears again

This is completely reproducable. To view it nicly I made the network connection a little bit slower and disabled caching, so it had to reload everything:

As you can see, the red area is where a white screen is shown.
If ‘~@ionic/angular/css/structure.css’ is removed, the red area is completely gone.

I pinned the problem down by reducing the css step by step.

The problematic part in structure.css was:

html:not(.hydrated) body {
  display: none;
}

I fixed the problem by adding the hydrated class to the html I want to display before angular has fully bootstrapped.

<html lang="en" dir="ltr" class="hydrated">

EDIT:
Search for hydrated bug brought me to an up to date issue of ionic:

Which also says: fix(runtime): always add .hydrated to <html>

It would be great if anyone could confirm that doing this has no bad effects on other parts of the application? Currently it looks good for me, it replaces it as soon as ionic things start loading. I tested it on browser and on android.

1 Like

Hey KevinB1, thanks and nice to know that I wasn’t the only crazy one.

Yes, I did something similar by overriding that block and put into app.component.scss, like this:

html:not(.hydrated) body {
    display: initial !important;
}

But, now that you have replied me and I went to check your solution to try in my code and realized that the Ionic team must have already fixed it. For me, it is no longer necessary to override whatsoever, please check in your side.