I'm encountering some weird inconsistent behavior between Chromium 53 and Firefox 49 when switching between stylesheets.
My stylesheets are added like this:
<link class="alternate-style" rel="stylesheet" title="Carbon"
type="text/css" href="assets/css/alt/Carbon.css" />
...
The switcher works like this:
function setStyle(style) {
$('link.alternate-style')
.prop('disabled', 'disabled')
.filter(function() { return this.title == style; })
.removeAttr('disabled');
}
(setStyle() is called on startup with a default value.)
This worked in Firefox and Chromium without any problems as late as jQuery 2.2.4.
Now I'm trying to upgrade to jQuery 3.1.1.
In Chromium, there's no problem at all - but in Firefox, it won't work after the upgrade. All stylesheets are disabled, and the style-changer won't do anything.
Suspecting that the removeAttr() has changed (jQuery now differentiates between attributes and properties more strictly), I changed setStyle to the following which seemed cleaner in any case:
function setStyle(style) {
$('link.alternate-style').prop('disabled', function() {
return this.title != style;
});
}
Now it works in Firefox, but not in Chromium! The bug is different - the style-switcher works fine, but the initializer is broken and the page will initially be unstyled.
Summary: In 2.2.4, both versions of the code work. In 3.1.1, the old code works in Chromium but not Firefox, while the new code works in Firefox but not Chromium.
By testing, I isolated the part of the code that will work in both browsers:
function setStyle(style) {
$('link.alternate-style')
.prop('disabled', true) // <-- necessary for chromium
.prop('disabled', function() {
return this.title != style;
});
}
That line seems redundant - the property will simply be overridden again. But commenting it out breaks the initialization in Chromium.
