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

embeddedtweet
javascript

#1

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?


#2

Bump. Any ideas how to fix this?


#3

@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:
https://twittercommunity.com/t/twitter-share-button-not-working-in-ie-and-ff-when-within-modal/101352