jquery - Safari で jQuery addClass() を使用して追加した後、CSS ルールが無視される

Question

別の要素の選択された値に応じて、jQueryを使用して要素の要素を非表示/非表示にするフォームがあります。

Safari 6.0 を除くすべてのブラウザー (IE、Firefox、Chrome) ですべて正常に動作します。

値に応じて要素を非表示にする関数は次のとおりです

function hideOptionIfValue(optionElements) {
    /* Loop through the possible values of value (using JS's arguments) */
    for (var i = 1; i < arguments.length; i++) {
        /* Reference arguments[i] as value for further use in .each() */
        var value = arguments[i];

        $(optionElements).each(function(){
            if($(this).val() === value) {
                $(this).addClass('hidden');
            }
        });
    }

場合によっては、この関数を次のように呼び出します。

hideOptionIfValue(optionElementsConcerned, 'valueToHide5');

またはそのように：

hideOptionIfValue(optionElementsConcerned, 'valueToHide1', 'valueToHide2', 'valueToHide3');

これを設定した後：

var optionElementsConcerned = $('#id1 option, #id2 option, #id3 option');

いくつかの基本的なデバッグの後、問題は隠しクラスに関連付けられた css ルールの「非解釈」に起因するようです (html5 ボイラープレートから):

.hidden {
    display: none !important;
    visibility: hidden;
}

実際、Safari でインスペクターを使用すると、選択したオプションに非表示のクラスが割り当てられますが、ドロップダウン メニューには表示されます。