0

I am loading a series of shims to try and get IE8 support in my react project. Below is the shims and order they are being loaded:

    html5shiv.js
    es5-shim.js
    es5-sham.js
    json2.js
    bind-shim.js
    object-shim.js
    eventShim.js
    respond.min.js

I also have a console polyfill file that loads at the end. All of these are being compiled into a single file, but for some reason the Bootstrap hidden property is not working.

I was wondering if it was an order deal or maybe these shouldn't all be loaded together.

prosborne
  • 61
  • 5
  • possible duplicate: http://stackoverflow.com/questions/17947182/ie8-issue-with-twitter-bootstrap-3 – user120242 Apr 28 '15 at 05:56
  • 1
    This is slightly different as the resources are all local and not using a CDN and the css is included above the shiv and shim so that it is adjusted after the CSS loads. My concern is that it might be due to duplication of the header because of using duplicate templates depending on browser (for other, unrelated reasons). I was mostly wondering if there was an order of js files that was interfering. – prosborne Apr 28 '15 at 17:01
  • Are you perhaps testing with IE9+ in compatibility mode? I can't think of anything that would cause what you are describing. Or maybe something to do with React whitespace stripping? Posting an example jsfiddle would make it easier to try to fix this. – user120242 May 05 '15 at 12:46

1 Answers1

0

The issue we had was actually a template issue. While the order of the elements need to be:

CSS > JS (so the JS could adjust the CSS as needed for IE8) because we were actually applying a new template for IE8 users, we were overwriting the CSS with the base CSS styles and it caused the whole site to fail.

By consolidating it into one template we were able to apply the JS changes to CSS at once so our initial state was correct.

prosborne
  • 61
  • 5