wait for main stylesheet to load before forcing layout

edit/edit.js

@@ -1,4 +1,4 @@
-/* global $ $create messageBoxProxy */// dom.js
+/* global $ $create messageBoxProxy waitForSheet */// dom.js
 /* global API msg */// msg.js
 /* global CodeMirror */
 /* global SectionsEditor */
@@ -16,7 +16,7 @@
 //#region init
 
 baseInit.ready.then(async () => {
-  await new Promise(requestAnimationFrame);
+  await waitForSheet();
   (editor.isUsercss ? SourceEditor : SectionsEditor)();
   await editor.ready;
   editor.ready = true;

js/dom.js

@@ -1,4 +1,4 @@
-/* global debounce */// toolbox.js
+/* global FIREFOX debounce */// toolbox.js
 /* global prefs */
 'use strict';
 
@@ -12,6 +12,7 @@
   moveFocus
   scrollElementIntoView
   setupLivePrefs
+  waitForSheet
 */
 
 Object.assign(EventTarget.prototype, {
@@ -356,6 +357,20 @@ function waitForSelector(selector, {recur, stopOnDomReady = true} = {}) {
   }
 }
 
+/**
+ * Forcing layout while the main stylesheet is still loading breaks page appearance
+ * so we'll wait until it loads (0-1 frames in Chrome, Firefox occasionally needs 2-3).
+ */
+async function waitForSheet({
+  href = location.pathname.replace('.html', '.css'),
+  maxFrames = FIREFOX ? 10 : 1,
+} = {}) {
+  const el = $(`link[href$="${href}"]`);
+  for (let i = 0; i < maxFrames && !el.sheet; i++) {
+    await new Promise(requestAnimationFrame);
+  }
+}
+
 //#endregion
 //#region Internals
 

manage/manage.js

@@ -13,6 +13,7 @@
   animateElement
   setupLivePrefs
   waitForSelector
+  waitForSheet
 */// dom.js
 'use strict';
 
@@ -94,7 +95,9 @@ newUI.renderClass();
     }}`);
 
   if (!VIVALDI) {
-    fitSelectBoxesIn($('#filters'));
+    waitForSheet().then(() => {
+      fitSelectBoxesIn($('#filters'));
+    });
   }
   if (CHROME >= 80 && CHROME <= 88) {
     // Wrong checkboxes are randomly checked after going back in history, https://crbug.com/1138598