Vuepress: how could I fix navigation issue in IE11?

[meision]

As I notice that, when I use IE11 to browse https://vuepress.vuejs.org/, the search bar becomes narrow and search feature unavailable, as well as navigation item shift out right side of the screen.

Any idea to fix them, thank you in advanced.

[ulivz]

I don't have a windows device, could you help to take a look at it and create a PR?

[meision]

Indeed? Tell me your address, and i will mail one to you. 😃

Please refer to follow pictures:

1. Difference between chrome and IE.
2. Search feature works fine in Chrome,
3. Search feature not work in Chrome,

[teucer]

Facing the same issue, any fix?

[deraw]

Hi!
I've noticed that there is the max-width: nullpx inline style applied on .navbar .links (in IE 11), but this doesn't actually affect the issue.

What causes the navigation links to hide on the right is a bug in IE with flex: 1.
To fix it, replace flex: 1; on .navbar .links .nav-links with flex: 1 0 auto;, or just remove it!

After that, the search icon is still not well-positionned, it seems that the best way to fix it is to set a fixed height on the input : height: 2rem; on .search-box input.

This fixed the interface, but if you're using Algolia search it's not over!
You'll need to add a polyfill in order to make it work, see https://hopingocean.github.io/vue-press/

If you wonder why https://vuepress.vuejs.org/ works well for this in IE 11, it's because they don't have flex: 1; on the navbar links, and that they're setting the heigt to 2rem on the input (with a media query to only apply on IE).

Going to do a PR to apply these fixes!

Also @ulivz, you can have a free BrowsterStack license for 5 users for any open-source project, so you can test an the majority of browsers! see browserstack.com/open-source

[deraw]

The first part of the issue has been fixed in https://github.com/vuejs/vuepress/commit/6734a608b2e637a48c2a634e3538beae86974927#diff-1f4a239c74ed05ddc03b5c94092deccc!

[deraw]

@ulivz I think you can close the issue now! :smile: