From 711f6502b59f8dfae1375c9d790fdb40f4580166 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Mon, 19 Apr 2021 16:01:36 +0300
Subject: [PATCH] make transition suppressor rule more robust

---
 global.css    |  7 +++----
 js/dom.js     | 12 ++++++++++--
 tools/test.js |  4 ++--
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/global.css b/global.css
index 5cf9f3a2..4c52364f 100644
--- a/global.css
+++ b/global.css
@@ -1,7 +1,6 @@
-html#stylus #header *:not(#\0) {
-  /* This suppresses transitions on page open.
-   * WARNING! Must be the first rule here so dom.js can simply call deleteRule for index 0.
-   * Using an increased specificity to override sane selectors in user styles */
+html#stylus #header *:not(#\0transition-suppressor) {
+  /* This suppresses a bug in all? browsers: they apply transitions during page load.
+   * Using an increased specificity to override sane selectors in user styles. */
   transition: none !important;
 }
 body {
diff --git a/js/dom.js b/js/dom.js
index ada2f408..d4111554 100644
--- a/js/dom.js
+++ b/js/dom.js
@@ -437,8 +437,16 @@ async function waitForSheet({
     window.on('resize', () => debounce(addTooltipsToEllipsized, 100));
   });
 
-  // Using `load` event as we need transition bug suppressor active until everything loads
-  window.on('load', () => $('link[href^="global.css"]').sheet.deleteRule(0), {once: true});
+  window.on('load', () => {
+    const {sheet} = $('link[href^="global.css"]');
+    for (let i = 0, rule; (rule = sheet.cssRules[i]); i++) {
+      // Not using \0 in the id as it's converted to \xFFFD, probably a bug
+      if (/#.transition-suppressor/.test(rule.selectorText)) {
+        sheet.deleteRule(i);
+        break;
+      }
+    }
+  }, {once: true});
 
   function addFaviconFF() {
     const iconset = ['', 'light/'][prefs.get('iconset')] || '';
diff --git a/tools/test.js b/tools/test.js
index 0134ac58..abee1c79 100644
--- a/tools/test.js
+++ b/tools/test.js
@@ -6,8 +6,8 @@ testGlobalCss();
 
 function testGlobalCss() {
   const css = fs.readFileSync('global.css', {encoding: 'utf8'});
-  const ERR = 'global.css: the first rule must be the transition suppressor';
-  const RX_SUPPRESSOR = /^[^{}]+{\s*transition:\s*none\s*!\s*important/i;
+  const ERR = 'global.css: missing the transition suppressor rule';
+  const RX_SUPPRESSOR = /[^{}]+#\\0transition-suppressor[^{}]+{\s*transition:\s*none\s*!\s*important/i;
   const RX_COMMENT = /\/\*([^*]|\*(?!\/))*(\*\/|$)/g;
   if (!RX_SUPPRESSOR.test(css.replace(RX_COMMENT, ''))) {
     console.error(ERR);