Loading Facebook Sdk In Ie11 Breaks Css Animations

After loading the Facebook SDK my CSS animations are breaking in IE11. Here is a test case: http://tremby.net/dump/ie11test.html Clicking the button toggles a class on it which rot

Solution 1:

I was about to post this as a bug on the Facebook bug tracker and found that it has already been reported there, with no fix yet:

• https://developers.facebook.com/bugs/454630827989944/
• https://developers.facebook.com/bugs/706822259370044/ (not sure if this one is the same; it could be)

It's to do with Facebook's use of document.createStyleSheet, and this function no longer existing in IE11.

That function can be polyfilled to work around the issue. A polyfill which worked for me can be found at https://gist.github.com/harriha/7778849#comment-966352 as follows:

(function() {
  // A polyfill for createStyleSheet() which isn't present in IE11 anymore.// This makes the current Facebook JS SDK to work so that it won't kick// IE11 out of the "responsive mode" (= @-ms-viewport still works).// Note: this should actually return a CSSStyleSheet object, but this// works as well here as long as at least the el is returned.document.createStyleSheet = document.createStyleSheet || function(url) {
    var el = document.createElement("style");
    el.href = url;
    document.getElementsByTagName("head")[0].appendChild(el);

    return el;
  };
})();