Skip to content

Latest commit

 

History

History
155 lines (110 loc) · 3.5 KB

IE11.md

File metadata and controls

155 lines (110 loc) · 3.5 KB
Raw

IE11 Support

Covalent currently offers experimental IE11 support, but there are some best practices and specific workarounds required in implementation that can't be fixed from the Covalent platform level.

Reference philipwalton/flexbugs for more detailed explanations.

Polyfills

Ensure you uncomment and add these polyfills in the src/polyfills.ts file of your Angular app:

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/reflect';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
import 'web-animations-js';
import 'core-js/es7/array'; // Needed for NGX-Charts
import 'classlist.js'; // Needed for NGX-Charts

and add this shim to the bottom of src/polyfills.ts:

 // Needed for NGX-Charts
 if (typeof SVGElement.prototype.contains === 'undefined') {
     SVGElement.prototype.contains = HTMLDivElement.prototype.contains;
 }

Next, edit your package.json and ensure you have these dependencies (NOTE: the versions will change):

 "core-js": "^2.4.1",
 "web-animations-js": "2.2.5",
 "classlist.js": "^1.1.20150312",  // Needed for NGX-Charts

IE11 Flexbox Workarounds & Best Practices:

Column flex items overflow their container

You may have to add an extra <div> wrapper around child elements in a layout="column"

For example:

<div layout="column">
    <div>
        <section>
            this was previously overflowing
        </section>
    </div>
</div>

ref: https://github.com/philipwalton/flexbugs#2-column-flex-items-set-to-align-itemscenter-overflow-their-container

Column flex items may not align center vertically

For example, if the flex items in layout="row" layout-align="start center" aren't vertically centered, try adding an extra layout="column" wrapper

For example:

<div layout="column">
    <div layout="row" layout-align="start center">
        <span>
            centered vertically
        </span>
    </div>
</div>

Some components may need flex wrappers if you want flex widths

For example, <component-name> needs a flex wrapper inside a layout="row"

<div layout="row">
    <div flex="40">
        <component-name></component-name>
    </div>
</div>

Some HTML elements can't be flex containers

For example, don't use layout="row" on <button md-button>

ref: https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers

Height:auto probably won't work on flex items

Try to add an explicit height px or % when possible

For example try this:

.class-name {
    width: 90%;
    height: 90%;
}

instead of:

.class-name {
    width: 90%;
    height: auto;
}

Visible overflow may be necessary

IE11 will height the overflow of certain element children

For example, if a parent has a border-radius, the child may be cut off. Use a utility class to reveal the overflow:

<div class="overflow-visible"></div>

Find IE11 bugs?

Please submit an issue with detailed description and screenshots:

https://github.com/Teradata/covalent/issues

Prefix your issue title with: [IE11] -