jquery - Safari での removeClass() と addClass() のケーシングの奇妙な動作

Question

例: http://jsfiddle.net/Zyniker/cSPBf/

背景 CSS を使用してさまざまなリスト タイプを示すページがあります。ページへの訪問者がボタンをクリックすると、サンプル リストからすべてのクラスが削除され (removeClass())、クリックされたボタンに対応する特定のクラスが追加されます (addClass())。このセットアップでは、明らかに jQuery を使用します。

問題 Chrome と Firefox ではすべてが意図したとおりに機能しますが (IE はまだテストしていません)、Safari ではリスト スタイルの約 3 分の 1 で問題が発生します。問題のあるコード セクションについては、jsfiddle リンクを参照してください。重要なのは、この問題が発生するのは、複数のスタイル間を行ったり来たりする場合だけです (すべてのスタイルでさえもそうではありません)。counter() の問題は、ナンバリングがオフ (たとえば、最初の li が 0 を受け取る) または完全に機能しない (つまり、すべての li が 0 を受け取る) 場合に発生するようです。特に、「書式設定のリセット」ボタン (サンプル テキストに対して単に removeClass() を実行する) が書式設定スタイル ボタンの間で押された場合、この問題は発生しません。各ボタンには、関連する addClass() ディレクティブの前に removeClass() ディレクティブが含まれているため、これはさらに奇妙です。

詳細情報 jsfiddle からわかるように、:before と content を使用して、リストの番号付けをサンプル テキストに追加しています。Safari は、counter() の前に何もないリスト スタイルのいずれでも問題ありません。この問題は、counter() の前に何かがある場合に発生します (たとえば、'\28')。この奇妙な動作の原因は何なのかわかりません。

これまでのトラブルシューティング コンテンツ スタイルの要素を再配置しましたが、問題は counter() の前に何かがある場合にのみ発生するようです。content ディレクティブで間隔を変更しても効果はありません。クラスを削除してから追加する jQuery は、2 つのディレクティブが 1 行または 2 行にある場合、まったく同じように反応します。さらに、遅延を追加しても何も起こりませんでした。

少しのコード CSS サンプル

.zlist-upper-roman-parens ol {
    list-style: none;
    counter-reset: zlist-upper-roman-parens;
}

.zlist-upper-roman-parens ol li:before {
    content: '\28'counter(zlist-upper-roman-parens, upper-roman)'\29';
    counter-increment: zlist-upper-roman-parens;
}

jQuery サンプル

$("#zlist-upper-roman-parens").click(function () {
    $("#zlist-example-displayer2").removeClass()
    $("#zlist-example-displayer2").addClass("zlist-upper-roman-parens");
});