Twitter Follow Button not working as expected in Chrome 27 and below
<p>So currently, the twitter follow button works as expected on my website in Chrome 28 and above. I noticed that it generates an <code>iframe</code> with these following attributes:</p>

<pre><code>&lt;iframe id="rufous-sandbox" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" style="position: absolute; visibility: hidden; display: none; width: 0px; height: 0px; padding: 0px; border: none;"&gt;&lt;/iframe&gt;
</code></pre>

<p>This is added at the bottom of the body element; however, in Chrome 27 and below it adds it in between the head tag and the body tag. Also, it adds it without the <code>rufous-sandbox</code> ID and forces it to "push" the body element down so there is a large white space at the top. </p>

<p>In Chrome 27 and below:</p>

<pre><code>&lt;head&gt;...&lt;/head&gt;
&lt;iframe&gt;..&lt;/iframe&gt;
&lt;body&gt;...&lt;/body&gt;
</code></pre>

<p><a href="https://i.stack.imgur.com/vNlch.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vNlch.jpg" alt="In Chrome 27"></a></p>

<p>How can I fix this? I tried adding the same styles to any <code>iframe</code> element, but that didn't work. The twitter script is in the <code>body</code> element, maybe I'm placing it in the wrong place ? Should it be in the <code>head</code> ?</p>