Does IE 11 support lightningdesignsystem with LWC ( Salesforce Lighting Web Component ) ?

[narendrasinghrathore]

lightning design system CSS classes styling not working on IE11

Below is the screenshot, left side chrome and the right one is IE11.

Is something we are missing to support IE11 or
Is it something that .slds classes of lightning design system doesn't support IE11?

Does lighting design system work on CSS grid, variables, flexbox, etc and IE11 doesn't support that?

Can you please confirm?

Thanks

[alexiscordova]

Hi, @narendrasinghrathore,

This is quite strange! While IE 11 has only partial support for Flexbox, it's surprising to see certain components here completely collapsed. A few questions:

1. When did you notice this behavior occurring? Did it work in the past but suddenly stopped working, or is this the first time you're noticing this?
2. Would it be possible for you to provide a link where we could view this in the browser to help diagnose the problem?
3. If not, would you be able to supply the HTML you're using?

Thanks!

[narendrasinghrathore]

@alexiscordova @stefsullrew I can see from salesforce official documentation that they will end support for IE11 by Dec 2020. So is it advisable to use IE11 with lighting design system?

1. We haven't tried on IE11, so this is our first time only we found this issue.
2. We cannot provide a link, as it works on client VM. policies and stuff.
3. Will try to get the HTML only.

Also, it would be helpful if could share more information, like what are the changes we need if we want to support IE11.
We are using CSS classes of salesforce lightning design system only (95%) and few customs CSS classes (5%)

Important: We are using salesforce LWC

[Dottenpixel]

@narendrasinghrathore @alexiscordova the use of LWC could be the answer there. I don't have any working knowledge of LWC in IE11, but from reading the docs I'm wondering if this app is in an unsupported experience where the polyfills are not being activated?

[kflournoy-sf]

@narendrasinghrathore - just following up, were you ever able to figure out your issue here?

[narendrasinghrathore]

@narendrasinghrathore - just following up, were you ever able to figure out your issue here?

@kflournoy-sf It was because of css grid not supported and partial support for flex on IE11 for which there is no polyfill support provided by Salesforce lwc library.

[narendrasinghrathore]

@kflournoy-sf Any update here?

[kflournoy-sf]

@narendrasinghrathore Are you seeing this issue using a lightning web component, or just the design system HTML from the blueprint?

[narendrasinghrathore]

@narendrasinghrathore Are you seeing this issue using a lightning web component, or just the design system HTML from the blueprint?

@kflournoy-sf Most with design system HTML from the blueprint i.e. 70 % and some with web components i.e. 30%

[Dottenpixel]

@narendrasinghrathore are you able to provide an example chunk of markup that reproduces the issue in the SLDS blueprint portion of the markup?

[kflournoy-sf]

@narendrasinghrathore - just checking in, are you able to provide the code sample as @Dottenpixel requested above?

[narendrasinghrathore]

@Dottenpixel & @kflournoy-sf Apologies for delay in reply, as now I am working on different project and framework, I cannot provide the markup also it was on client VM machine, so no access.