javascript - 在 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找到对我有用的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;
  };
})();