在IE11中加载Facebook SDK可以打破CSS动画 [英] Loading Facebook SDK in IE11 breaks CSS animations

问题描述

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

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

点击按钮可切换在它上面的类通过CSS动画旋转按钮一点点。五秒钟之后，Facebook SDK被加载。在Firefox和Chrome和IE10上，按钮继续工作，但在IE11上，当添加课程时，动画将不再播放。

我无法重现问题在JSFiddle中。

任何想法是什么原因造成的？它必须是IE11或Facebook的SDK出错，但我需要找到一个解决方法。

这可能与 Facebook共享按钮打破IE11中的CSS动画，看起来非常相似。

解决方案

我即将发布在Facebook错误跟踪器上的一个错误，发现它已经在那里报道，没有修复： p>

• https：// developers.facebook.com/bugs/454630827989944/


• https://developers.facebook.com/bugs/706822259370044/ （不知道这一个是否相同;可能是）

这是与Facebook使用 document.createStyleSheet ，一个这个功能不再存在于IE11中。

该功能可以用于解决问题。可以在 https://gist.github.com/harriha找到适合我的polyfill / 7778849＃comment-966352 如下：

 （function（）{
 // polyfill对于不存在于IE11中的createStyleSheet（）
 //这使得当前的Facebook JS SDK工作，使其不会从响应模式（$）中踢
 // IE11 = @ -ms-viewport仍然有效）
 //注意：这应该实际返回一个CSSStyleSheet对象，但这个
 //在这里工作，只要至少返回el。
 document.createStyleSheet = document.createStyleSheet || function（url）{
 var el = document.createElement（style）; 
 el.href = url; 
 document.getElementsByTagName（ head）[0] .appendChild（el）; 
 
 return el; 
}; 
}）（）; 
  

After loading the Facebook SDK my CSS animations are breaking in IE11.

Here is a test case: http://tremby.net/dump/ie11test.html

Clicking the button toggles a class on it which rotates the button a little via a CSS animation. After five seconds the Facebook SDK is loaded. On Firefox and Chrome and IE10 the button keeps working after this, but on IE11 the animation will no longer play when the class is added.

I can't reproduce the issue in JSFiddle.

Any idea what's causing this? It has to be something wrong with either IE11 or with Facebook's SDK, but I need to find a workaround.

This may well be related to Facebook share button breaking CSS animations in IE11 which looks very similar.

解决方案

I was about to post this as a bug on the Facebook bug tracker and found that it has already been reported there, with no fix yet:

• https://developers.facebook.com/bugs/454630827989944/
• https://developers.facebook.com/bugs/706822259370044/ (not sure if this one is the same; it could be)

It's to do with Facebook's use of document.createStyleSheet, and this function no longer existing in IE11.

That function can be polyfilled to work around the issue. A polyfill which worked for me can be found at https://gist.github.com/harriha/7778849#comment-966352 as follows:

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

这篇关于在IE11中加载Facebook SDK可以打破CSS动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！