Кнопка «Поделиться» в Facebook нарушает анимацию CSS в 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-button" data-href="http://myurl.com" data-width="60" data-type="button"></div> в теле.

Он отлично работает в Chrome, Firefox, Safari и IE10 (а также в IE11 с включенной эмуляцией IE10). Но в IE11 некоторые CSS-анимации перестают работать. Анимации, установленные по умолчанию в таблице стилей, работают, но анимации, запущенные с помощью :hover, а также встроенный CSS, добавленный jQuery, просто не будут воспроизводиться.

Я могу подтвердить, что другие эффекты :hover все еще работают, и установка встроенных (неанимационных) стилей через jQuery также работает. Это просто анимация почему-то. Я также пробовал анимировать различные свойства, но ни один из них не работает.

Если я уберу скрипт Facebook из заголовка документа, анимация снова начнет работать.

Кто-нибудь еще сталкивался с этим или знает, почему это может происходить?

Примечание. Это в IE v11.0.9600.16428, Win7 x64.


person UnknownDeveloper    schedule 10.03.2014    source источник


Ответы (1)


Я только что опубликовал очень похожий вопрос, а затем нашел решение. Интересно, сработает ли то же самое для вас. См. ответ на Загрузка Facebook SDK в IE11 прерывает анимацию CSS

person tremby    schedule 03.07.2014