スタイルシートを切り替えると、Chromium 53 と Firefox 49 の間で奇妙な一貫性のない動作が発生します。
私のスタイルシートは次のように追加されます:
<link class="alternate-style" rel="stylesheet" title="Carbon"
type="text/css" href="assets/css/alt/Carbon.css" />
...
スイッチャーは次のように機能します。
function setStyle(style) {
$('link.alternate-style')
.prop('disabled', 'disabled')
.filter(function() { return this.title == style; })
.removeAttr('disabled');
}
( setStyle() は起動時にデフォルト値で呼び出されます。)
これは、Firefox と Chromium で、jQuery 2.2.4 まで問題なく動作しました。
今、jQuery 3.1.1 にアップグレードしようとしています。
Chromium ではまったく問題ありませんが、Firefox ではアップグレード後に動作しなくなります。すべてのスタイルシートが無効になり、スタイルチェンジャーは何もしません。
removeAttr() が変更されたのではないかと疑って (jQuery は属性とプロパティをより厳密に区別するようになりました)、setStyle を次のように変更しました。
function setStyle(style) {
$('link.alternate-style').prop('disabled', function() {
return this.title != style;
});
}
Firefox では動作しますが、Chromium では動作しません! バグは異なります。スタイル スイッチャーは正常に動作しますが、初期化子が壊れており、ページは最初はスタイルが設定されていません。
概要: 2.2.4 では、両方のバージョンのコードが機能します。3.1.1 では、古いコードは Chromium では機能しますが Firefox では機能しません。一方、新しいコードは Firefox では機能しますが Chromium では機能しません。
テストにより、両方のブラウザーで動作するコードの一部を分離しました。
function setStyle(style) {
$('link.alternate-style')
.prop('disabled', true) // <-- necessary for chromium
.prop('disabled', function() {
return this.title != style;
});
}
その行は冗長に思えます - プロパティは単純に再度オーバーライドされます。ただし、コメントアウトすると、Chromium での初期化が中断されます。