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

【问题标题】：Loading Facebook SDK in IE11 breaks CSS animations在 IE11 中加载 Facebook SDK 会破坏 CSS 动画
【发布时间】：2014-08-23 23:27:47
【问题描述】：

加载 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 有关。

【问题讨论】：

标签： javascript facebook internet-explorer css-animations

【解决方案1】：

我正要在 Facebook 错误跟踪器上将此作为错误发布，发现那里已经报告了它，但还没有修复：

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

这与Facebook使用document.createStyleSheet有关，IE11中不再存在此功能。

该函数可以通过 polyfill 来解决这个问题。可以在 https://gist.github.com/harriha/7778849#comment-966352 找到对我有用的 polyfill，如下所示：

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

【讨论】：