Переполнение: скрытый не применяется в Firefox 5 при настройке через JavaScript

Question

Подтверждено, что это ошибка в Firefox, и вы можете узнать о ней больше на https://bugzilla.mozilla.org/show_bug.cgi?id=686247

Я устанавливаю overflow на hidden через jQuery, но она не применяетсяв Firefox 5, в то время как в других браузерах это применяется хорошо.Пожалуйста, протестируйте этот jsfiddle, чтобы увидеть проблему самостоятельно: http://jsfiddle.net/f4HJd/ А вот изображение того, как оно выглядит в Firefox 5: http://i.stack.imgur.com/70zfy.png, и изображение этого в Chrome для сравнения: http://i.stack.imgur.com/eKVPB.png Что не так с overflow в FF5?

EDIT:

После некоторых тестов я обнаружил, что свойство overflow применяется к элементам, которые имеютбыл добавлен динамически через JavaScript.Таким образом, это означает, что мы можем обойти ошибку, заменив соответствующий элемент его копией и применив к нему overflow: hidden следующим образом в jQuery:

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

Так же, как примечание, мы могли бы даже избежать заменыкогда возможно, элемент выглядит так:

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

EDIT 2:

Как показали дальнейшие тесты, overflow: hidden также хорошо применяется, когда свойство positionустановить absolute или когда для свойства display установлено значение block или inline-block, статически через CSS или через JavaScript.Таким образом, что-то вроде этого может легко помочь:

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

РЕДАКТИРОВАТЬ 3:

Проблема, похоже, касается только элементов textarea.Я проверил это на элементах DIV, и содержание хорошо обрезается.Итак, я подозреваю, что это потому, что элементы textarea встроены, а свойство overflow предназначено для работы с элементами уровня блока.

Answer 1

Это похоже на ошибку в Firefox.Вызов jQuery для установки переполнения, равного скрытому, кажется, не работает в Firefox, если вы сначала не установите для переполнения CSS текстового поля значение в атрибуте css или style, а затем скажите jQuery установить переполнение на скрытый.

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

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

Хотя мне любопытно, почему вы не просто создаете класс css для этой текстовой области, вместо того чтобы полагаться на javascript, чтобы сначала скрыть полосы прокрутки.