Embedded tweet IFrame too tall


#1

Hi, I just noticed a bug on my website (http://www.politweet.org/site/pop_yesterday.php) where embedded tweets in tabs are not rendering properly. The initial tab renders the tweets properly, however the other tabs add extra height to each tweet in excess of 1000 pixels. The height parameter of each tweet is being set to high values such as 3060, 2792, 3080 even before initial rendering.

Around 4AM (UTC+8) when I last checked all embedded tweets worked ok. The HTML of the page has not changed. I have been using the same Bootstrap CSS and javascript coding for months without issue. I suspect the error is a recent change in how the http://platform.twitter.com/widgets.js code works.

Regards,

Kamal


#2

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 &#x201c;@ShahrizatJalil: Doa kami agar BN menang di Dun Pengkalan Kubor esok hari. Utk pembangunan ummah. http://t.co/wQyDn&#x2026;</p>&mdash; 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.


#3

Ok after some testing I have found the bug to be present on Google Chrome, Opera and Internet Explorer. On Mozilla Firefox all the tweets load fine (no extra height issue). To reproduce the issue:

  1. Visit http://www.politweet.org/site/pop_yesterday.php OR http://www.politweet.org/site/news.php
  2. Allow the initial page load to complete. Don’t click on other tabs yet.
  3. Click on other tabs. Embedded tweet height will be too tall.

#4

A deploy has gone out that should fix the issue. Sorry about the troubles and thanks for the excellent report.


#5

Thank you for the quick fix, everything looks back to normal now.


#6