From 116d70d08a4df580267f6ea4b6ca2667d887b5ca Mon Sep 17 00:00:00 2001
From: Moaed Yahia <84312526+moaead@users.noreply.github.com>
Date: Wed, 21 Jan 2026 06:26:26 +0000
Subject: [PATCH] fix: Prevent black flash when switching workspaces to split
 view, p=#11966

---
 src/zen/split-view/ZenViewSplitter.mjs | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/zen/split-view/ZenViewSplitter.mjs b/src/zen/split-view/ZenViewSplitter.mjs
index 14f955ce5..95d520663 100644
--- a/src/zen/split-view/ZenViewSplitter.mjs
+++ b/src/zen/split-view/ZenViewSplitter.mjs
@@ -1354,10 +1354,15 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature {
       }
     });
 
+    // Apply grid to tabs first to set zen-split attribute on containers
+    // before setting zen-split-view on parents. This prevents the black flash
+    // caused by CSS rules that hide containers without zen-split attribute
+    // when the parent has zen-split-view attribute.
+    this.applyGridToTabs(splitData.tabs);
+
     this.tabBrowserPanel.setAttribute("zen-split-view", "true");
     document.getElementById("tabbrowser-tabbox").setAttribute("zen-split-view", "true");
 
-    this.applyGridToTabs(splitData.tabs);
     this.applyGridLayout(splitData.layoutTree);
     this.setTabsDocShellState(splitData.tabs, true);
     this.toggleWrapperDisplay(true);
@@ -1403,6 +1408,10 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature {
       tab.setAttribute("split-view", "true");
       const container = tab.linkedBrowser?.closest(".browserSidebarContainer");
       container.setAttribute("is-zen-split", "true");
+      // Set zen-split early to prevent visibility flash when switching workspaces.
+      // The CSS rule for [is-zen-split]:not([zen-split]) sets visibility:hidden,
+      // so we must set zen-split before the parent zen-split-view attribute is applied.
+      container.setAttribute("zen-split", "true");
       if (!container?.querySelector(".zen-tab-rearrange-button")) {
         // insert a header into the container
         const header = this._createHeader(container);