StyleSetter: Better handling of unsupported CSS rules (Palemoon fix)

src/services/style_setter/style_setter.js

@@ -124,17 +124,34 @@ 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)
-      }
-    } else {
-      styles.sheet.insertRule(rule, 'index-max')
+      } 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)
+      }
+    }
   }
 
   const { lazyProcessFunc } = generateTheme(