Question

This is confirmed to be a bug in Firefox and you can learn more about it at https://bugzilla.mozilla.org/show_bug.cgi?id=686247

I am setting overflow to hidden 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: http://jsfiddle.net/f4HJd/ And here is an image of how it looks in Firefox 5: https://i.stack.imgur.com/70zfy.png and an image of that in Chrome to compare: https://i.stack.imgur.com/eKVPB.png What is wrong with overflow in FF5?

EDIT:

After some tests I found out that the overflow 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 overflow: hidden to it as follows in jQuery:

$('textarea').replaceWith($('textarea').clone().css('overflow', 'hidden'));

Just as a side note, we could even avoid replacing the element when possible like so:

// for all browsers
$('textarea').css('overflow', 'hidden');
// for FF only
if ($.browser.mozilla) $('textarea').replaceWith($('textarea').clone());

EDIT 2:

As further tests showed, overflow: hidden also get applied well when the position property is set to absolute or when the display property is set to either block or inline-block, via CSS statically or via JavaScript. So, something like this can easily help out:

$('textarea').css({ display: 'inline-block', overflow: 'hidden' });

EDIT 3:

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.

Answer 1

This appears to be a bug in Firefox. The call from jQuery to set overflow equal to hidden doens’t seem to work in Firefox unless you set the textarea’s css overflow to a value in your css or style attribute first, then tell jQuery to set overflow to hidden.

textarea {
    width: 100px;
    height: 100px;
    overflow:auto;
}

(function ($) {
    $(document).ready(function () {
        $('textarea').css('overflow', 'hidden');
    });
})(jQuery);

Although, I am curious why you don’t just create a css class for that textarea, instead of relying on javascript to hide it’s scrollbars in the first place.