Loading Facebook SDK in IE11 breaks CSS animations

Question

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 rotates the button a little via a CSS animation. After five seconds the Facebook SDK is loaded. On Firefox and Chrome and IE10 the button keeps working after this, but on IE11 the animation will no longer play when the class is added.

I can't reproduce the issue in JSFiddle.

Any idea what's causing this? It has to be something wrong with either IE11 or with Facebook's SDK, but I need to find a workaround.

This may well be related to Facebook share button breaking CSS animations in IE11 which looks very similar.

Answer 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;
  };
})();