Prevent no-override-color becoming visible when transition set

Author: WebCoder49

code-input.css

@@ -24,10 +24,10 @@ code-input {
    to keep low precedence and thus overridability
    The variable names may change and are for internal use. */
   /* --code-input_highlight-text-color: Set by JS to be base text color of pre code element */
-  --code-input_no-override-color: revert; /* Set by JS for very short time to get whether color has been overriden */
-  color: var(--code-input_no-override-color, revert);
-  /* --code-input_default-caret-color: Set by JS to be same as color property */
-  caret-color: var(--code-input_default-caret-color, black); /* Set by JS to be equal to color property - currentColor won't work because it's lazily evaluated so gives transparent for the textarea */
+  /* --code-input_no-override-color: Set by JS for very short time to get whether color has been overriden */
+  color: var(--code-input_no-override-color, black);
+  /* --code-input_default-caret-color: Set by JS to be same as color property - currentColor won't work because it's lazily evaluated so gives transparent for the textarea */
+  caret-color: var(--code-input_default-caret-color, black);
   background-color: white;
 
   /* Normal inline styles */

code-input.js

@@ -558,24 +558,26 @@ var codeInput = {
         isColorOverridenSyncIfNot() {
             const oldTransition = this.style.transition;
             this.style.transition = "unset";
-            this.style.setProperty("--code-input_no-override-color", "rgb(0, 0, 0)");
-            if(getComputedStyle(this).color == "rgb(0, 0, 0)") {
-                // May not be overriden
-                this.style.setProperty("--code-input_no-override-color", "rgb(255, 255, 255)");
-                if(getComputedStyle(this).color == "rgb(255, 255, 255)") {
-                    // Definitely not overriden
-                    this.style.removeProperty("--code-input_no-override-color");
-                    this.style.transition = oldTransition;
-
-                    const highlightedTextColor = getComputedStyle(this.getStyledHighlightingElement()).color;
-
-                    this.style.setProperty("--code-input_highlight-text-color", highlightedTextColor);
-                    this.style.setProperty("--code-input_default-caret-color", highlightedTextColor);
-                    return false;
+            window.requestAnimationFrame(() => {
+                this.style.setProperty("--code-input_no-override-color", "rgb(0, 0, 0)");
+                if(getComputedStyle(this).color == "rgb(0, 0, 0)") {
+                    // May not be overriden
+                    this.style.setProperty("--code-input_no-override-color", "rgb(255, 255, 255)");
+                    if(getComputedStyle(this).color == "rgb(255, 255, 255)") {
+                        // Definitely not overriden
+                        this.style.removeProperty("--code-input_no-override-color");
+                        this.style.transition = oldTransition;
+
+                        const highlightedTextColor = getComputedStyle(this.getStyledHighlightingElement()).color;
+
+                        this.style.setProperty("--code-input_highlight-text-color", highlightedTextColor);
+                        this.style.setProperty("--code-input_default-caret-color", highlightedTextColor);
+                        return false;
+                    }
                 }
-            }
-            this.style.removeProperty("--code-input_no-override-color");
-            this.style.transition = oldTransition;
+                this.style.removeProperty("--code-input_no-override-color");
+                this.style.transition = oldTransition;
+            });
 
             return true;
         }