Covalent: [Question] IE11 - status, roadmap?

[ivanko2000]

First, thank you for your efforts - great project!

One obvious issue for an enterprise-oriented web framework is the lack of IE11 support due to CSS flexbox issues. Issue #199 relevant to this question was recently closed with a simple "not supported" and no details/opinions/aspirations on whether that will ever change.

Clearly, there are bugs in IE's implementation of these features and it looks like MS is not interested in addressing those (beyond Edge improvements). I am not an expert, but it's my understanding that there are known workarounds that could be incorporated into the framework:

http://stackoverflow.com/questions/37905749/flexbox-not-working-in-internet-explorer-11
https://github.com/philipwalton/flexbugs

The need for IE11 support is not so much due to the overwhelming love for MS but primarily due to the corporate environments/solutions (and their constraints) this framework is [supposedly] targeting. With that in mind:

Is there any kind of plan/roadmap to address this issue?

[mcstepp]

Unofficially (because I'm not part of the Covalent team), I'm working on adding/contributing as much IE11 support as I can, but I can't give you a roadmap :(

[jdrew1303]

This is a post I put up on the covalent gitter channel about this issue:

I'm currently using it with IE11 but there is a lot of polyfills and preprocessors needed to get it working. Even with that there are certain features that you need to avoid.

The 2 core ones are https://github.com/web-animations/web-animations-js and then https://github.com/jonathantneal/flexibility

Some of the components that dont work properly are search, charts and the markdown components. The markdown one is due to how it does transclusion. We ended up rebuilding the markdown component to handle adding it to the DOM using

this.el.nativeElement.innerHTML = converter.makeHtml(this._md);

I've a feeling that this is probably the same issue with the charting libraries (along with SVG issues).

You can still get a lot of goodies from covalent (page layouts, datatables, etc) if you avoid the problem parts.

Hope this helps :+1:

The comment on the markdown issue is wrong. It has to do with how the input is handled (see below :man_facepalming: )

Usually my first port of call is to shim out the feature thats missing if possible and it gets you 90% of the way there. Some of the items that are currently broken in IE are:

• Charts (haven't looked too much into the bowels of it)
• Markdown render (have a fix for this I need to try and get released back)
• Searchbar (it wont slide out, it does a little and then stops, haven't looked into this too much)

I wouldnt mind helping out on this, Ill keep documenting as I find items. At least it gives a bit of a tasklist of what would need to be done.

[mcstepp]

Great! That really helps things move along on my end.

Another thing we're looking at and tracking progress with is autoprefixer inclusion into angular-cli, since autoprefixer has baked-in support for the CSS issues regarding flex and IE11. Maybe get some freebies on that side.

[emoralesb05]

So we dont really have a roadmap for IE11 support yet since we arent focusing on that to be honest (we just support what flexbox supports).

That being said, we LOVE that people want to contribute that and help us out with it.

We can use this as an epic and create small tasks for what needs to be done if you all want to help out with this 😄 and that way we can organize it better.

[emoralesb05]

Also, once we pin point the specific issues and solutions, we can either document it for polyfill inclusions or bugfixes. 🎉

[kyleledbetter]

One thing to keep in mind when investigating IE11 issues: Components doesn't have a default CSS display type, which I think is one of the issues in IE11. You'd have to add :host { display: block; } or :host { display: flex; } to every ___.component.scss for every component

[jdrew1303]

Cool :grin: We at least now we have a plan of attach and a possible path to limited IE compat. Ill try to put together whatever we've come across (we keep track of it in our issues) and Ill add them here. Ill also add some docs on the build we use to handle flex and animations.

[sreekumarp]

Having alignment issues for Chips control in IE 11. Please suggest some fix or workarounds for this...

IE 11:

Chrome:

[FrancoisJULIENNE]

Fix IE11 chip with hack css (SASS) (ie9->ie11) :

@media screen and (min-width:0\0) and (min-resolution:+72dpi) {
    .td-chip {
        -ms-flex-preferred-size: auto!important;
        vertical-align: middle;
        height: 32px;
    }
    .td-chip span {
        display: inline-block!important;
    }
    td-chips .mat-basic-chip md-icon.td-chip-removal {
        top: 3px!important;
    }
}

Adapt the styles to your design.

See more hack css : https://browserstrangeness.bitbucket.io/css_hacks.html

I do not think a Covalent day will be compatible with IE11.
It's a solution like any other!

[stout01]

For anybody that runs into issues with chips and backspacing on IE11... When removing a chip with backspace, IE11 will navigate back a page. I added this keydown event to td-chips:

  public preventBackButton(event) {
    const tagName = (event.target || event.srcElement).tagName;

    if (event.keyCode === 8 && (tagName !== 'TEXTAREA') && (tagName !== 'INPUT')) {
      event.stopPropagation();
      return false;
    }
  }

[jeremysmartt]

Basic IE11 support exists. If there are specific issues please write individual issues.