SharePoint 2013 masterpage + bootstrap compatibility with Internet Explorer 8

Question

I’m currently developing a SharePoint portal that will mostly be used by clients with Intern Explorer 8 with responsive design requirement. As a result compatibility with IE 8 is pretty important. I was under the impression that the latest bootstrap was IE8 compatible, but according to this: I need to include:

<!– HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries –>
<!–[if lt IE 9]>
<script src=”https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js”></script>
<script src=”https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js”></script>
<![endif]–>

That's fine, I have included above in my 2013 SharePoint master page! We are using a mega menu based on managed navigation for top nav.

The responsive design works fine for pages, except when the page loads, the mega menu for mobile version shows up for 2-3 seconds and then normal (desktop based) mega menu shows up.

Does anyone having a clue to why it is switching to mobile version first even though I am connecting with a desktop client?

Answer 1

Since respond.js is a presentational script, its placement within your HTML can dramatically impact page performance and execution time, especially on less capable browsers with slower JS engines. This module takes the guesswork out of placement and puts the script where it will be most effective.

• Optimal location is in the head after your CSS but before most JS files.
• Placing Respond too low in HTML or after too many other JS
  requests can delay IE's execution by whole seconds, resulting in poor UX.

Make sure you have this order in your head tag. Load the CSS first, then html5shiv.js and respond directly after. Before all other JS scripts.

I've tried using SharePoints ScriptLink but that did not work, use the standard script tag.

Hopefully this will reduce the mobile version view a few seconds.