Кнопка Tweet не появляется при использовании в аккордеоне с некоторыми браузерами

Question

Я использую следующий код для отображения кнопки Twitter, чтобы поделиться страницей с одного сайта.

<script>$(document).ready(function(){!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");});</script>

<a href="https://twitter.com/share" class="twitter-share-button" data-url="/myUrl" data-text="message" data-hashtags="myhashtag">Tweet</a>

Этот код работает без проблем при использовании на странице, независимо от того, какой браузер яЯ использую.

Теперь моя проблема начинается, когда я хочу поместить эту кнопку в HTML-аккордеон.Когда элемент помещается во что-то, что сначала скрыто, CSS ведет себя по-разному в зависимости от браузера.В Chrome большую часть времени кнопка твита отображается при расширении аккордеона.Находясь в Internet Explorer и Firefox (у меня нет Edge для тестирования), кнопка вычисляется с размером 1px.Если я использую инструменты разработчика, чтобы установить правильные размеры кнопки в CSS, то она появится.Javascript делает свое дело: скрипт загружен, и iframe здесь со всем необходимым кодом, у меня нет проблем с загрузкой с сайта твиттера, моя единственная проблема с вычисленным CSS, который предотвращает отображение кнопки.

Поэтому мне нужна помощь для отображения кнопки, даже если она скрыта при запуске.

Редактировать: приведенный ниже фрагмент является попыткой продемонстрировать мою проблему.

.btn-o {
    width: 100% !important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>$(document).ready(function(){!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");});</script>
<p>
Tweet button not hidden at start
<a href="https://twitter.com/share" class="twitter-share-button" data-url="/myUrl" data-text="message" data-hashtags="myhashtag">Tweet</a>
</p>
<p>
Tweet button hidden at start

<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        Here is also a tweet button, if you see nothing you have my bug demonstrated (don't work with IE or Firefox most of the time)
        <a href="https://twitter.com/share" class="twitter-share-button" data-url="/myUrl" data-text="message" data-hashtags="myhashtag">Tweet</a>
      </div>
    </div>
  </div>
</div>

</p>
</div>

Answer 1

Я мог воспроизвести проблему с Mozilla, и после отключения добавления блокировщика кнопка твиттера показывает первый вне аккордеона:

после более тщательного изученияЯ обнаружил, что вам нужно установить некоторую высоту и ширину равными 100px или более и отключить переполнение одного свойства: hidden;

Вот примеры снимков экрана и последнее, что вам нужно будет создать для CSS-класса, специфичного для mozilla / firefox,обработайте это обновление:

Так что вам нужно будет использовать образец CSS для Firefox:

@-moz-document url-prefix() {
 //inside put class you want to override

}

Answer 2

Хорошо, вот решение, которое мне удалось заставить его работать, и объяснение:

Первое объяснение: твиттер ищет кнопку щебета, чтобы вставить один iframe.К сожалению, если контент не виден, тогда размер iframe будет 1.

Второй обработать ошибку: мне пришлось добавить событие в мой скрытый контент, чтобы обрабатывать случаи, когда сгенерированный твиттер iframeимеет размер 1. Таким образом, идея состоит в том, чтобы добавить новую кнопку и перезагрузить виджет Twitter, чтобы заменить ссылку на iframe, когда контент виден (мы делаем это с помощью twttr.widgets.load ();).Мы также должны делать это только один раз, а не каждый раз, поэтому я добавил одну проверку ширины iframe перед вставкой содержимого и перезагрузкой виджета.

$(".card").on('click',function(){
var width=0;
// calculates largest width for the iframe
$('#collapseOne').find('.card-body').find('iframe').each(function(){if (width < $(this).width()) {width=$(this).width()}});
// we do the following only if there is no larger iframe for the tweet button
// otherwise there is a risk to insert more than one button in the page
if(width < 2) {
$('#collapseOne').find('.card-body').append('<a href="https://twitter.com/share" class="twitter-share-button" data-url="/myUrl" data-text="message" data-hashtags="myhashtag">Tweet</a>');
twttr.widgets.load();
}
});

Спасибо @misorude за предложение публикации в сообществе ина этот пост Повторно визуализировать кнопку Tweet через JS , которая помогла мне перезагрузить виджет Twitter.

Answer 3

Кажется, что класс для кнопки твита btn-o.Попробуйте добавить стиль для btn-o

.btn-o {
    width: 100% !important;
}