From 0280a7deef37cf3c6f3649cb891b2e1ec1c1935b Mon Sep 17 00:00:00 2001
From: "mr. m" <91018726+mr-cheffy@users.noreply.github.com>
Date: Tue, 17 Mar 2026 15:14:01 +0100
Subject: [PATCH] gh-12765: Fixed grain being covered by the background
 (gh-12800)

---
 src/zen/common/styles/zen-browser-ui.css | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/zen/common/styles/zen-browser-ui.css b/src/zen/common/styles/zen-browser-ui.css
index ac2990e5a..dedbe4e0b 100644
--- a/src/zen/common/styles/zen-browser-ui.css
+++ b/src/zen/common/styles/zen-browser-ui.css
@@ -86,17 +86,17 @@
 
   & .zen-browser-grain {
     display: none;
+    position: absolute;
+    inset: 0;
+    background-image: url(chrome://browser/content/zen-images/grain-bg.png);
+    pointer-events: none;
+    z-index: 1;
   }
 
   &[zen-show-grainy-background="true"] .zen-browser-grain {
     display: flex;
-    width: 100%;
-    height: 100%;
-    background-image: url(chrome://browser/content/zen-images/grain-bg.png);
-    pointer-events: none;
-    z-index: 1;
     opacity: var(--zen-grainy-background-opacity, 0);
-    mix-blend-mode: overlay;
+
     :root:not([swipe-gesture="true"]) & {
       /* note: Keep in sync with kGlobalAnimationDuration */
       transition: opacity 0.2s ease-in-out;