在IE11中加载Facebook SDK会破坏CSS动画

Question

加载Facebook SDK后，我的CSS动画在IE11中断了。

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

单击该按钮可在其上切换一个类，通过CSS动画稍微旋转按钮。五秒钟后加载Facebook SDK。在Firefox和Chrome以及IE10之后，按钮在此之后继续工作，但在IE11上，添加类时动画将不再播放。

我无法在JSFiddle中重现这个问题。

知道是什么导致了这个吗？ IE11或Facebook的SDK都有问题，但我需要找到解决方法。

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

Answer 1

我准备将这个发布为Facebook错误跟踪器上的错误，发现它已经在那里报告，但尚未修复：

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