Facebook分享按钮，在IE11中打破CSS动画 [英] Facebook share button breaking CSS animations in IE11

问题描述

这个问题刚刚开始发生在过去的几个星期，所以它可能与IE11更新或FB的小部件的变化有关。

我有一个FB在我的网站上分享按钮。

 < script> 
（function（d，s，id）{
 var js，fjs = d.getElementsByTagName（s）[0]; 
 if（d.getElementById（id））return; 
 js = d.createElement（s）; 
 js.id = id; 
 js.src =//connect.facebook.net/en_US/all.js#xfbml=1; 
 fjs.parentNode.insertBefore（js，fjs）; 
}（document，'script'，'facebook-jssdk'））; 
< / script> 
  

在文档头，以及< div id = fb-root>< / div> 和< div class =fb-share-buttondata-href =http://myurl.com data-width =60data-type =button>< / div> 在正文中。

在Chrome，Firefox，Safari和IE10（以及IE11 w / IE10仿真打开）。但在IE11某些CSS动画停止工作。动画设置默认情况下，样式表工作，但动画通过：hover以及由jQuery添加的内联CSS将不会播放。

我可以确认其他：悬停效果仍然有效，并且通过jQuery设置内联（非动画）样式也起作用。这只是动画的某些原因。我也尝试过动画各种不同的属性，但没有一个可以工作。

如果我从文档头删除了Facebook脚本，动画再次开始工作。 p>

有没有人遇到过或知道为什么会发生这种情况？

注意：这是在IE v11.0.9600 .16428，Win7 x64

解决方案

我刚刚发布了一个非常相似的问题，然后找到了一个解决方案。我想知道同样的情况是否适合你。请参阅在IE11中加载Facebook SDK的答案会打破CSS动画

This issue just started occurring in the past couple of weeks, so it may be related to an IE11 update or a change with FB's widget.

I have a FB share button on my site.

<script>
    (function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s);
        js.id = id;
        js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>

is in the document head, as well as <div id="fb-root"></div> and <div class="fb-share-button" data-href="http://myurl.com" data-width="60" data-type="button"></div> in the body.

It works fine in Chrome, Firefox, Safari and IE10 (as well as IE11 w/ IE10 emulation turned on). But in IE11 certain CSS animations stop working. Animations set by default in the stylesheet work, but animations fired via :hover as well as inline CSS added by jQuery just won't play.

I can confirm that other :hover effects still work, and setting inline (non-animation) styles via jQuery also work. It's just animations for some reason. I've also tried animating various different properties, but none of them work.

If I remove the Facebook script from the document head, the animations start working again.

Has anyone else encountered this or know why it might be happening?

Note: This is on IE v11.0.9600.16428, Win7 x64

解决方案

I just posted a very similar question and then found a solution. I wonder if the same will work for you. See the answer at Loading Facebook SDK in IE11 breaks CSS animations

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