在IE11中加载Facebook破坏CSS动画

Question

在加载了Facebook之后，我的CSS动画在IE11中崩溃了。

下面是一个测试用例：http://tremby.net/dump/ie11test.html

单击该按钮会在其上切换一个类，该类通过CSS动画稍微旋转按钮。5秒后，Facebook被加载。在火狐浏览器、Chrome和IE10上，这个按钮在此之后继续工作，但在IE11上，当添加类时，动画就不再播放了。

我不能在JSFiddle中复制这个问题。

知道是什么导致的吗？无论是IE11还是Facebook的SDK都有问题，但我需要找到解决办法。

这很可能与看起来非常相似的Facebook share button breaking CSS animations in IE11有关。

Answer 1

我正要把它作为一个bug发布在Facebook的bug跟踪器上，发现它已经在那里被报道过了，还没有修复：

• https://developers.facebook.com/bugs/454630827989944/
• https://developers.facebook.com/bugs/706822259370044/ (不确定这个是否相同；可能是)

这与Facebook对document.createStyleSheet的使用有关，而且这个功能在IE11中不再存在。

这个功能可以被多层填充来解决这个问题。在https://gist.github.com/harriha/7778849#comment-966352可以找到一个对我有用的填充材料，如下所示：

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