search

salesforce-ux / design-system

Salesforce Lightning Design System
https://www.lightningdesignsystem.com
Other
3.57k stars 828 forks source link

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

Closed narendrasinghrathore closed 3 years ago

narendrasinghrathore commented 4 years ago

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

image

alexiscordova commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

@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 commented 3 years ago

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

narendrasinghrathore commented 3 years ago

@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 commented 3 years ago

@kflournoy-sf Any update here?

kflournoy-sf commented 3 years ago

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

narendrasinghrathore commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

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

narendrasinghrathore commented 3 years ago

@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.