title: Overflow: hidden does not apply in Firefox 5 when set via JavaScript
body: <p><strong>This is confirmed to be a bug in Firefox and you can learn more about it at <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=686247" rel="nofollow">https://bugzilla.mozilla.org/show_bug.cgi?id=686247</a></strong></p>
  
  <p>I am setting <code>overflow</code> to <code>hidden</code> via jQuery but it does not get applied in Firefox 5 while in other browsers it does get applied well. Please test this jsfiddle to see the problem yourself: <a href="http://jsfiddle.net/f4HJd/" rel="nofollow">http://jsfiddle.net/f4HJd/</a> And here is an image of how it looks in Firefox 5: <a href="http://i.stack.imgur.com/70zfy.png" rel="nofollow">http://i.stack.imgur.com/70zfy.png</a> and an image of that in Chrome to compare: <a href="http://i.stack.imgur.com/eKVPB.png" rel="nofollow">http://i.stack.imgur.com/eKVPB.png</a> What is wrong with <code>overflow</code> in FF5?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>After some tests I found out that the <code>overflow</code> property does get applied to elements that have been added dynamically via JavaScript. So, that means we can workaround the bug by replacing the element in question with its copy and applying <code>overflow: hidden</code> to it as follows in jQuery:</p>
  
  <pre><code>$('textarea').replaceWith($('textarea').clone().css('overflow', 'hidden'));
  </code></pre>
  
  <p>Just as a side note, we could even avoid replacing the element when possible like so:</p>
  
  <pre><code>// for all browsers
  $('textarea').css('overflow', 'hidden');
  // for FF only
  if ($.browser.mozilla) $('textarea').replaceWith($('textarea').clone());
  </code></pre>
  
  <p><strong>EDIT 2:</strong></p>
  
  <p>As further tests showed, <code>overflow: hidden</code> also get applied well when the <code>position</code> property is set to <code>absolute</code> or when the <code>display</code> property is set to either <code>block</code> or <code>inline-block</code>, via CSS statically or via JavaScript. So, something like this can easily help out:</p>
  
  <pre><code>$('textarea').css({ display: 'inline-block', overflow: 'hidden' });
  </code></pre>
  
  <p><strong>EDIT 3:</strong></p>
  
  <p>The problem only appear to be regarding textarea elements. I tested it on DIV elements and the content get clipped well. So, I suspect it is because textarea elements are inline and the overflow property is meant to work for block-level elements.</p>