Ionic 4 Browser Support [IE 11]

#1

The page at: https://ionicframework.com/docs/intro/browser-support suggests that IE 11 is a supported browser for running an Ionic 4 app, however I can not get an Ionic 4 app to run in IE 11.

Steps to reproduce:

ionic start test sidemenu
ionic serve

Opening in IE 11, I see the following error in the console:

Exception thrown and not caught:
_for-of.js

Ionic:

ionic (Ionic CLI) : 4.10.2 (C:\Users\neil\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.0.1
@angular-devkit/build-angular : 0.12.4
@angular-devkit/schematics : 7.2.4
@angular/cli : 7.2.4
@ionic/angular-toolkit : 1.3.0

System:

NodeJS : v10.15.1 (C:\Program Files\nodejs\node.exe)
npm : 6.4.1
OS : Windows Server 2016

Can anybody confirm whether IE is actually supported?

#2

#3

Thanks, that helped a bit.

By enabling the polyfills I was at least able to get the site to render in Internet Explorer 11, but because Ionic 4 now uses CSS4 variables a lot of my styling was not being applied.

I tried using https://github.com/jhildenbiddle/css-vars-ponyfill to add support for CSS4 variables, which helped a little more, but I am still finding that a number of my styles are not correctly applied.

For example my application has the following in my variables.scss file:

:root {
--ion-color-primary: #8f1838;

If I then have a page that has an ion-toolbar such as:

<ion-header>
<ion-toolbar color=“primary”>
<ion-buttons slot=“start”>
<ion-menu-button></ion-menu-button>
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>
Title
</ion-title>
</ion-toolbar>
</ion-header>

I am finding that the toolbar background colour is not correctly styled, and uses the default background colour.

#4

A little more information:

If I update my package.json to contain:

@angular/cli”: “7.3.1”

And set:

“es5BrowserSupport”: true

In my angular.json

Then I no longer need to manually pull in the polyfills, and Ionic seems to do this for me. This gives a site that at least renders in IE11.

Whats more it seems to be using some value for the background colour of the toolbar, just not the one I am setting!

e.g. Changing

<ion-toolbar color=“secondary”>

Does indeed change the background colour of the toolbar, just not to the value I define in my variables.scss

#5

It seems like the :root { declaration of variables in variables.scss is not working as I would expect.

If I override these values in global.scss with:

.ion-color-secondary {
--ion-color-secondary: yellow;
}

Then the styling is correctly applied.

The confusion continues…

#6

Changing my variables.scss from:

:root {

too:

:root * {

Seems to cause the variables to be set in IE11

1 Like
#7
  • Update @angular/cli to 7.3
  • Add es5BrowserSupport : true in angular.json
  • Change variables.scss to contain :root * {

Doing this seems to allow CSS 4 variables to work on IE 11 within then main ion-content area, but any styling applied outside of this element still does not work.

For example the ion-toolbar within ion-content has the correct background color, but the ion-toolbar within an ion-menu element ( as this sits outside the ion-content) does not have the correct styles applied.

Coming to the conclusion that it is not possible to use Ionic 4 with IE 11, which is a show stopper for me :frowning:

1 Like
#8

If you need to target IE11 your gonna continually hit your head against a wall trying to make ionic work.

Give it up and use angular material or bootstrap or something.

1 Like
#9

Actually having re-read the documentation on setting your own colours within Ionic (Ref: https://ionicframework.com/docs/theming/advanced#colors) I have found that as long as I declare the variables at the root level (correctly) and use the polyfills it does work in IE 11.

Obviously that doesn’t mean there won’t be other issues, and I may be better off not fighting this, but it at least gives me some more options to explore :slight_smile:

So be clear what I had to do to get this to work in IE 11:

Update Angular CLI

Update the version of the Angular CLI to 7.3 (thanks to Mike Hartington via Slack for this tip) allows Angular to auto inject the polyfills only on those browser that need them

Variables.scss

I had to change the declaration of :root {} to :root * {} in variables.scss to get these to apply in IE 11

Declare my Own Colour Variables

I added new custom variables such as:

.ion-color-favorite {
  --ion-color-base: #69bb7b;
  --ion-color-base-rgb: 105,187,123;
  --ion-color-contrast: #ffffff;
  --ion-color-contrast-rgb: 255,255,255;
  --ion-color-shade: #5ca56c;
  --ion-color-tint: #78c288;
}
:root * {
  --ion-color-favorite: #69bb7b;
  --ion-color-favorite-rgb: 105,187,123;
  --ion-color-favorite-contrast: #ffffff;
  --ion-color-favorite-contrast-rgb: 255,255,255;
  --ion-color-favorite-shade: #5ca56c;
  --ion-color-favorite-tint: #78c288;
}

As per https://ionicframework.com/docs/theming/advanced#colors

Obviously due to the limitations of the polyfill these variables must be declared at the root level, and not via a DOM selector

1 Like