在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共享按鈕破壞IE11中的CSS動畫有關，后者看起來非常相似。

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