Facebook share button breaking CSS animations in IE11

问题

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

回答1:

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

来源：https://stackoverflow.com/questions/22290210/facebook-share-button-breaking-css-animations-in-ie11