Twitter share button not working in IE and FF when within modal



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 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() {;
		//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 ="twitter-label");
				var shareTwitterText ="twitter-text");

				if (shareTwitterLabel != undefined) {
					shareHtml += '<a href="'+shareTwitterText+'&url='+shareUrl+'" title="'+shareTwitterLabel+'" target="_blank"><img src="/assets_src/images/tweetbtn.png" alt="Twitter"></a>';

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.

Twttr.widgets.load() doesn't render hidden elements properly
Tweet button is invisible in Edge (when in AngularUI modal)

Hi there,

Do you have a link to reproduce this issue?


Hi @lananelson I fixed it on the live site but have recreated it here:

Hopefully you’ll see when “share this article” is clicked in Chrome the Tweet button appears but in Firefox the Tweet button does not appear.

Hope that helps


This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.