suppress transition bug on page open in Chrome, too (#1193)

edit.html

@@ -4,18 +4,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <link href="global.css" rel="stylesheet">
-
-    <style id="firefox-transitions-bug-suppressor">
-      /* restrict to FF */
-      @supports (-moz-appearance:none) {
-        /* increased specificity to override sane selectors in user styles */
-        html#stylus.firefox #stylus-edit #header *,
-        html#stylus.firefox #stylus-edit #sections * {
-          transition: none !important;
-        }
-      }
-    </style>
-
     <link id="cm-theme" rel="stylesheet">
 
     <script src="js/polyfill.js"></script>

global.css

@@ -1,3 +1,9 @@
+html#stylus #stylus-manage #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 */
+  transition: none !important;
+}
 body {
   font: normal 12px Arial, system-ui, sans-serif;
 }

js/dom.js

@@ -3,9 +3,10 @@
 'use strict';
 
 /* exported
-  $$remove
   $createLink
   $isTextInput
+  $remove
+  $$remove
   animateElement
   getEventKeyName
   messageBoxProxy
@@ -431,11 +432,13 @@ async function waitForSheet({
   });
 
   onDOMready().then(() => {
-    $remove('#firefox-transitions-bug-suppressor');
     debounce(addTooltipsToEllipsized, 500);
     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});
+
   function addFaviconFF() {
     const iconset = ['', 'light/'][prefs.get('iconset')] || '';
     for (const size of [38, 32, 19, 16]) {

manage.html

@@ -6,16 +6,6 @@
   <title i18n-text="manageTitle"></title>
   <link rel="stylesheet" href="global.css">
 
-  <style id="firefox-transitions-bug-suppressor">
-    /* restrict to FF */
-    @supports (-moz-appearance:none) {
-      /* increased specificity to override sane selectors in user styles */
-      html#stylus.firefox #stylus-manage #header * {
-        transition: none !important;
-      }
-    }
-  </style>
-
   <!-- Notes:
     * Chrome doesn't garbage-collect (or even leaks) SVG <symbol> referenced via <use> so we'll embed the code directly
     * inter-tag whitespace in templates is automatically removed in localization.js

options.html

@@ -6,16 +6,6 @@
   <title i18n-text-append="optionsHeading">Stylus </title>
   <link rel="stylesheet" href="global.css">
 
-  <style id="firefox-transitions-bug-suppressor">
-    /* restrict to FF */
-    @supports (-moz-appearance:none) {
-      /* increased specificity to override sane selectors in user styles */
-      html#stylus.firefox #options *, #stylus #notes * {
-        transition: none !important;
-      }
-    }
-  </style>
-
   <script src="js/polyfill.js"></script>
   <script src="js/toolbox.js"></script>
   <script src="js/msg.js"></script>

popup.html

@@ -6,16 +6,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="global.css">
 
-  <style id="firefox-transitions-bug-suppressor">
-    /* restrict to FF */
-    @supports (-moz-appearance:none) {
-      /* increased specificity to override sane selectors in user styles */
-      html#stylus.firefox #stylus-popup #actions * {
-        transition: none !important;
-      }
-    }
-  </style>
-
   <template data-id="style">
     <div class="entry">
       <div class="entry-content">