From 4d26b4d597c18fdfdc6a780b6b65cf53b3e6224e Mon Sep 17 00:00:00 2001
From: "mr. m" <91018726+mr-cheffy@users.noreply.github.com>
Date: Sun, 26 Apr 2026 19:20:36 +0200
Subject: [PATCH] no-bug: Make transparent urlbar work again (gh-13424)

---
 src/zen/common/styles/zen-browser-container.css | 3 ++-
 src/zen/common/styles/zen-omnibox.css           | 9 ++++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/zen/common/styles/zen-browser-container.css b/src/zen/common/styles/zen-browser-container.css
index 48701b785..fb820d695 100644
--- a/src/zen/common/styles/zen-browser-container.css
+++ b/src/zen/common/styles/zen-browser-container.css
@@ -36,7 +36,8 @@
          * is a hacky solution, but it works for now. Note that this makes
          * zen REALLY slow, so lets not enable it by default until we have
          * a better solution. */
-        will-change: transform;
+        translate: 0;
+        backface-visibility: hidden;
       }
     }
   }
diff --git a/src/zen/common/styles/zen-omnibox.css b/src/zen/common/styles/zen-omnibox.css
index 529293857..f943090fc 100644
--- a/src/zen/common/styles/zen-omnibox.css
+++ b/src/zen/common/styles/zen-omnibox.css
@@ -17,12 +17,12 @@
 }
 
 .urlbar {
-  --urlbarView-separator-color: light-dark(hsl(0, 0%, 92%), hsl(0, 0%, 20%));
+  --urlbarView-separator-color: light-dark(hsl(0, 0%, 80%), hsl(0, 0%, 20%));
   --urlbarView-hover-background: var(--toolbarbutton-hover-background);
   --urlbarView-highlight-background: var(--toolbarbutton-hover-background);
   border-radius: calc(var(--toolbarbutton-border-radius) - 2px);
   height: var(--urlbar-height);
-  --urlbarView-results-padding: 8px !important;
+  --urlbarView-results-padding: 10px !important;
   --urlbar-container-height: 48px !important;
 
   --urlbar-margin-inline: 5px;
@@ -263,7 +263,10 @@
     --zen-urlbar-background-base: light-dark(#fbfbfb, color-mix(in srgb, hsl(0, 0%, 6.7%), var(--zen-colors-primary) 30%));
     /* stylelint-disable-next-line media-query-no-invalid */
     @media -moz-pref("zen.theme.acrylic-elements") {
-      --zen-urlbar-background-transparent: color-mix(in srgb, var(--zen-urlbar-background-base) 70%, transparent 30%);
+      --zen-urlbar-background-transparent: light-dark(
+        color-mix(in srgb, var(--zen-urlbar-background-base) 90%, transparent),
+        color-mix(in srgb, var(--zen-urlbar-background-base) 65%, transparent)
+      );
     }
     background-color: var(--zen-urlbar-background-transparent, var(--zen-urlbar-background-base)) !important;
     box-shadow: 0 30px 140px -15px light-dark(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6)) !important;