Here is one example of how the HTML is transformed by the widgets.js:
Source HTML:
<div class="col-12 col-sm-12 col-lg-12"><blockquote class="twitter-tweet"><p>RT @PetraJayaMP: Ameen “@ShahrizatJalil: Doa kami agar BN menang di Dun Pengkalan Kubor esok hari. Utk pembangunan ummah. http://t.co/wQyDn…</p>— AsiahIsa (@AsiahIsa) <a href="https://twitter.com/AsiahIsa/statuses/514813472245182464">September 24th, 2014</a></blockquote></div>
Transformed into:
<div class="col-12 col-sm-12 col-lg-12" data-twttr-id="twttr-sandbox-30"><iframe id="twitter-widget-30" scrolling="no" frameborder="0" allowtransparency="true" class="twitter-tweet twitter-tweet-rendered" allowfullscreen="" title="Embedded Tweet" height="2155" style="border-style: solid; border-width: 1px; border-color: rgb(238, 238, 238) rgb(221, 221, 221) rgb(187, 187, 187); max-width: 99%; min-width: 220px; margin: 10px 0px; padding: 0px; display: block; position: static; visibility: visible; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 3px; width: 500px;"></iframe></div>
The height is set to a very high value and I can’t figure out how to fix it. This only happens to tweets on hidden tabs.