Hello,
Apologies if this has been raised before but couldn’t see anything recent on the forum.
I came across a bit of an odd bug recently, using https://dev.twitter.com/web/tweet-button within a pop-up modal was working as expected in Chrome, but in Firefox, Edge and Internet Explorer the tweet button wouldn’t appear.
After a lot of investigation, it appears to be down to the fact the content within the modal is hidden using display none.
Eventually I worked around this using the following:
$(shareModalBtn).on( "click", function() {
shareModal.show();
//share modal FF/IE twitter fix
var twitterBtn = $('#twitter-widget-0');
if (twitterBtn.width() < 2) {
var shareHtml = "";
var el = $('#twitterShareIEFF');
var shareUrl = window.location.href;
var shareTwitterLabel = el.data("twitter-label");
var shareTwitterText = el.data("twitter-text");
if (shareTwitterLabel != undefined) {
shareHtml += '<a href="https://twitter.com/intent/tweet?text='+shareTwitterText+'&url='+shareUrl+'" title="'+shareTwitterLabel+'" target="_blank"><img src="/assets_src/images/tweetbtn.png" alt="Twitter"></a>';
el.text('').append(shareHtml);
}
}
});
So, checking if the twitter-widget-0 was less than 2px wide (which is what was happening in non Chrome browsers)
Then manually create and insert the twitter button.
This may well be an edge case but wanted to share in case anyone came across something similar, or if this is fixed in the future.