Minimal support for IE11

[zenflow]

Is this a bug report?

It's a browser compatibility issue, so Yes?

I couldn't find any documentation on supported browsers. I assume that the modern major browsers are all supported but what about Internet Explorer which is still a major browser? I hope we can have minimal support for it, since our library targets the latest version of all major browsers and our users would expect our docs/examples site to have the same browser support.

Have you read the Contributing Guidelines on issues?

Yes I have

Environment

irrelevant, it's a problem in the built site running in IE11, doesn't matter where the site is built

Steps to Reproduce

1. Visit https://docusaurus.io/ in the latest version of IE

Expected Behavior

I would expect that maybe not everything looks quite right, but the site is functional / usable.

Actual Behavior

It's impossible to navigate the site because the menu items in the menu bar are all smooshed together in the top right corner and it's impossible to read them or click a particular one.

Reproducible Demo

Visit https://docusaurus.io/ in IE11..

[yangshun]

@zenflow Would you be able to fix it? Unfortunately we only have Macs :/

[ahmadalfy]

@yangshun I would love to claim and fix this.

[yangshun]

@ahmadalfy That's great! Go ahead. Feel free to rewrite the CSS for the nav bar as well 😄

[ahmadalfy]

@yangshun OK this was far more simple than I thought 💃

I found other issues as well that I can fix and they will require minimal changes. I can think of opening a PR with the label [WIP] and every commit fix something then you merge whenever you think it's right. What do you think?

[yangshun]

@ahmadalfy Amazing speed! Sounds good. Let's do that 👍

[yangshun]

@ahmadalfy If possible, could you list down the IE11 issues you intend to fix as a comment here? We can then use this issue to track the fixes.

[ahmadalfy]

@yangshun these are the issues that I found:

• Navigation collapse
• Shorthand font format with -apple-system making the value invalid to IE11 and hence ignoring the whole declaration
• flex-basis and padding with box-sizing: border-box doesn't work as expected and hence causing overflow of the content (one block per line, screenshot 1, screenshot2)
• Showcase page having the footer on top overlapping everything on the page (screenshot)
• Massive white space between content and footer (on installation page , screenshot )

[yangshun]

Oh gosh. Would love to see your fixes if you are up for it! 🥇

[ahmadalfy]

I am working on it.

[JoelMarcey]

@ahmadalfy Thank you for fixing these! ❤️

[ahmadalfy]

@JoelMarcey you're welcome! Thanks for the motivation you gave me at F8 ❤️

[ahmadalfy]

@yangshun the last issue (on installation page) is due to the image in the content. This is a really weird bug I don't think I have ever encountered it before. The image has max-width: 100% and it's width is reduced but someway its original height is occupying the space. I am not sure how 😭

Will investigate.

[endiliey]

We had a css revamp on 1.3.0 #757

I tried this today (we are on 1.3.2) on IE11, the experience is not that bad. Seems quite functional to me