diff --git a/changelog.d/palemoon-css-compatibility.fix b/changelog.d/palemoon-css-compatibility.fix new file mode 100644 index 0000000000000000000000000000000000000000..8afa056548682d521ea91f5002540362b1e91a09 --- /dev/null +++ b/changelog.d/palemoon-css-compatibility.fix @@ -0,0 +1 @@ +Fix CSS compatibility issues in style_setter.js for older browsers like Palemoon \ No newline at end of file diff --git a/src/main.js b/src/main.js index 514dd0a0e3184dafbc3aa06bb2bf2d6a49544b03..6b8ccf35a4d9b0ac34f81d080e78d3c6a5a41087 100644 --- a/src/main.js +++ b/src/main.js @@ -5,6 +5,13 @@ import { createPinia } from 'pinia' import 'custom-event-polyfill' import './lib/event_target_polyfill.js' +// Polyfill for Array.prototype.toSorted (ES2023) +if (!Array.prototype.toSorted) { + Array.prototype.toSorted = function(compareFn) { + return [...this].sort(compareFn) + } +} + import vuexModules from './modules/index.js' import { createI18n } from 'vue-i18n' diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index 5eb8108848b7258fd38d59c879639ed94963d70e..50be5444371edc26b8f38d49f9a00338cc4efba1 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -124,16 +124,33 @@ export const applyTheme = ( const lazyStyles = createStyleSheet(LAZY_STYLE_ID) const insertRule = (styles, rule) => { - if (rule.indexOf('webkit') >= 0) { + try { + // Try to use modern syntax first try { styles.sheet.insertRule(rule, 'index-max') styles.rules.push(rule) - } catch (e) { - console.warn('Can\'t insert rule due to lack of support', e) + } catch { + // Fallback for older browsers that don't support 'index-max' + styles.sheet.insertRule(rule, styles.sheet.cssRules.length) + styles.rules.push(rule) + } + } catch (e) { + console.warn('Can\'t insert rule due to lack of support', e, rule) + + // Try to sanitize the rule for better compatibility + try { + // Remove any potentially problematic CSS features + let sanitizedRule = rule + .replace(/backdrop-filter:[^;]+;/g, '') // Remove backdrop-filter + .replace(/var\(--shadowFilter\)[^;]*;/g, '') // Remove shadowFilter references + + if (sanitizedRule !== rule) { + styles.sheet.insertRule(sanitizedRule, styles.sheet.cssRules.length) + styles.rules.push(sanitizedRule) + } + } catch (e2) { + console.error('Failed to insert even sanitized rule', e2) } - } else { - styles.sheet.insertRule(rule, 'index-max') - styles.rules.push(rule) } }