Follow and Share buttons stopped working in IE & FF

[technosis]

Howdy! We used the button generator code to create follow and share buttons within some modal dialogs. With no change to the code on our end, the buttons are now hidden in IE. For the follow button, it appears the iframe is generated with the style attribute containing “visibility: hidden”. The share button has that as well but also has a width of 0 on the button div element within the iframe content. This is happening only in IE and only in the last couple days.

Sample code:

<a href="https://twitter.com/1065wyrk" class="twitter-follow-button" data-show-count="false" data-size="large" data-dnt="true">Follow @1065wyrk</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

My initial thought is that the modal being hidden when the button is added is a factor but since this works in all other browsers and has only started having problems in IE recently, I am not entirely sure. Tested in IE 11. Any ideas?

UPDATE: Firefix is also affected

[niall]

Does your webpage include a rendering engine directive for Internet Explorer such as X-UA-Compatible?
https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible

I was unable to repeat your issue from an isolated JSFiddle.
http://jsfiddle.net/niallkennedy/j5uo50po/

[technosis]

We are not currently using any rendering engine directives, no. That said, I’ve discovered that FF is affected as well. I’ve managed to reproduce the issue in JSFiddle: http://jsfiddle.net/technosis/o1fzvdzu/

When you open the modal window, the twitter buttons show up in chrome but not on IE or FF.

[technosis]

For the time being, we have implemented this workaround: http://jsfiddle.net/technosis/o1fzvdzu/2/

The modal is initially loaded off screen rather than hidden with “display: none”. The dynamic content from the button script seems to load with the correct parameters/styles in this scenario. Any clue as to why the difference?

[breiko]

Hi! I was struggling with the same problem.
https://jsfiddle.net/z4r41638/

I’m now considering your workaround but I was wondering if you got any feedback on this.
Thanks!

[technosis]

I never got a response. The workaround is still functioning.

[Roadirsh]

Thanks for the workaround, it works great.
But is there any chance to be an official way to do it ?

[niall]