Angular 5 - SVG with *ngFor causing rendering issues in IE11 but not Chrome

0
votes

I've created a component in Angular 5 that will be used to indicate progress through a number of stages. It works great in Chrome, but when testing it in IE11 it has some odd behaviour that renders it unusable.

The component uses an SVG and generates the elements of the image using Angular directives and attribute bindings. In IE11 it does not render all of the elements immediately. It will load the empty progress bar and the "Stage 1" label. If I click into one of the text boxes and then click away it will load the "Stage 2" label. After repeating this several times it will eventually render everything. However, when changing the values in the text boxes the update doesn't happen as smoothly as it does in Chrome.

Here is a StackBlitz sample demonstrating the issue.

It seems to be a problem related to using ngFor on an SVG element, but I have no idea why or how to resolve it.

Any help would be greatly appreciated.

---------- EDIT -------------

I have since found that the issue is caused by one particular angular binding. If I remove the following binding from line 14 of progress-stage-bar.component.html then IE works as expected.

[class.current-stage]="isCurrentStage(stage)"

I have tried to replace this with [ngClass] instead, but the same issue occurs.

Can anyone please help me understand why this is a problem for Internet Explorer when it works without an issue in Chrome?

1
angularinternet-explorersvg
SVG elements should be preceeded by a svg: selector to tell Angular it should avoid treating it as a custom element. Find more information here - user4676340
And by the way, your stackblitz isn't working - user4676340
The stackblitz has been corrected - thanks for pointing it out for me - TheCrimsonSpace
@trichetriche - Thanks for sharing the link. I looked at that same article when I was trying to troubleshoot this issue yesterday. It advises that adding the svg: prefix is good practice but is not strictly necessary unless your SVG elements will be spread over multiple components. I did try it, just in case, but it still didn't seem to work. - TheCrimsonSpace

1 Answers

1
votes

After some poking and prodding I found that this is the same issue as described in this StackOverflow Question.

In a nutshell, Internet Explorer 11 doesn't support the JavaScript "classList" property on SVG elements, which is used by Angular to handle any [ngClass] or [class.??????] bindings at runtime.

Some kind person has already created a "shim" or "polyfill" for this, named classlist.js. There is a comment about this already in the polyfill.ts of a new Angular project:

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js';  // Run `npm install --save classlist.js`.

This was raised as a bug in the Angular GitHub page, but the official response seems to be to use the shim already mentioned.