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);