Ionic 4 blank Screen and CSS not working on android 5 and 4

Though we all love ionic 4 one of the most frustrating things is the problems that might come with it on older devices. These problems have been attributed to some issues on stencil which are being looked into, but until then here is a fix that has been made available.

We will start by the issue of the blank screen on loading the application on android 4 or 5 devices.

This can be solved by using polyfills.  You can find the polyfills.ts file in the application-root/src folder,

In the polyfills.ts fill you will find the section below commented

/***************************************************************************************************

 * BROWSER POLYFILLS

 */

/** IE9, IE10, IE11, and Chrome <55 requires all of the following polyfills.

 *  This also includes Android Emulators with older versions of Chrome and Google Search/Googlebot

 */

// import ‘core-js/es6/symbol’;

// import ‘core-js/es6/object’;

// import ‘core-js/es6/function’;

// import ‘core-js/es6/parse-int’;

// import ‘core-js/es6/parse-float’;

// import ‘core-js/es6/number’;

// import ‘core-js/es6/math’;

// import ‘core-js/es6/string’;

// import ‘core-js/es6/date’;

// import ‘core-js/es6/array’;

// import ‘core-js/es6/regexp’;

// import ‘core-js/es6/map’;

// import ‘core-js/es6/weak-map’;

// import ‘core-js/es6/set’;

You uncomment the browser polyfill imports and that should solve the problem of the blank screen on loading the app.
your update section should be like:

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

/** IE9, IE10, IE11, and older Chrome requires all of the following polyfills. **/
 import 'core-js/es6/symbol';
 import 'core-js/es6/object';
 import 'core-js/es6/function';
 import 'core-js/es6/parse-int';
 import 'core-js/es6/parse-float';
 import 'core-js/es6/number';
 import 'core-js/es6/math';
 import 'core-js/es6/string';
 import 'core-js/es6/date';
 import 'core-js/es6/array';
 import 'core-js/es6/regexp';
 import 'core-js/es6/map';
 import 'core-js/es6/weak-map';
 import 'core-js/es6/set';
 import 'core-js/es6/promise';
 import 'core-js/es7/object';

Now for the problem of the css not working as expected especially on the css variables. I managed to solve this issue by installing the css-vars-ponyfill. You can install using npm:

npm install css-vars-ponyfill

After installing using npm you need to add it to the polyfills.ts file

 import cssVars from 'css-vars-ponyfill';

To fix the css variables issue you can then add a small script using the css-vars-ponyfill import you will have done. I will use an example of the primary color css variable.

cssVars({
    variables: {
      primary: '#8b26c4',
      secondary:'#0cd1e8',
      success: '#10dc60'
    }
  });