Twttr.widgets.load() doesn't render hidden elements properly



Will try to keep it as short as possible. I load tweets with ajax (they’re hidden with display:none), render them (with widgets.load) and after that is done, I display the div containing the tweets. I have a problem that tweets that are rendered while hidden don’t render properly.

While a non-hidden tweet has is contained within a div like this (inside the shadow dom)

<div data-twitter-event-id="2" class="SandboxRoot env-bp-min" style="position: relative;">

When I render a hidden tweet, it is contained within a div like this

<div data-twitter-event-id="7" class="SandboxRoot undefined" style="position: relative;">

The lack of the env-bp-min class makes the tweet non-responsive, always displaying the “Follow” button instead of only displaying the icon with smaller widths.

Is there any workaround for this?


Bump. Any ideas how to fix this?


@aandevski came across something similar (I think) the twitter button was within a hidden modal and therefore caused problems in Firefox and IE.
I used JS to insert the button if it wasn’t displaying, see: