From 458475abe6cd327e0b52717e7c6ac93465071478 Mon Sep 17 00:00:00 2001
From: Alireza Hassani <alirezahassani@Meshkees-Mac-mini.local>
Date: Wed, 23 Sep 2026 15:55:26 +0330
Subject: [PATCH] Make categories dock glass blur reliable in Chromium.

Keep backdrop-filter inline, portal outside overflow-clipped app chrome, and avoid transform centering.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/components/CategoriesDock.css |  3 +--
 src/components/CategoriesDock.tsx | 10 +++++++++-
 src/index.css                     |  2 +-
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/CategoriesDock.css b/src/components/CategoriesDock.css
index 9de76e0..8aae8e5 100644
--- a/src/components/CategoriesDock.css
+++ b/src/components/CategoriesDock.css
@@ -29,8 +29,7 @@
       rgba(255, 247, 241, 0.42) 45%,
       rgba(255, 255, 255, 0.28) 100%
     );
-  backdrop-filter: blur(20px) saturate(170%);
-  -webkit-backdrop-filter: blur(20px) saturate(170%);
+  /* backdrop-filter set inline in TSX — build minify was dropping the standard property */
   box-shadow:
     0 10px 36px rgba(143, 65, 12, 0.14),
     0 2px 8px rgba(0, 0, 0, 0.04),
diff --git a/src/components/CategoriesDock.tsx b/src/components/CategoriesDock.tsx
index a666881..4ebd3eb 100644
--- a/src/components/CategoriesDock.tsx
+++ b/src/components/CategoriesDock.tsx
@@ -50,7 +50,15 @@ const DOCK_CATEGORIES = [
 export default function CategoriesDock() {
   return createPortal(
     <nav className="categories-dock" aria-label="دسته‌بندی محصولات">
-      <div className="categories-dock__glass" aria-hidden="true" />
+      <div
+        className="categories-dock__glass"
+        aria-hidden="true"
+        style={{
+          // Inline so Vite/LightningCSS cannot drop the unprefixed property.
+          backdropFilter: 'blur(20px) saturate(170%)',
+          WebkitBackdropFilter: 'blur(20px) saturate(170%)',
+        }}
+      />
       <ul className="categories-dock__list">
         {DOCK_CATEGORIES.map((category) => (
           <li key={category.slug} className="categories-dock__item">
diff --git a/src/index.css b/src/index.css
index 7f2808d..8b682bf 100644
--- a/src/index.css
+++ b/src/index.css
@@ -67,7 +67,7 @@ body {
   background: var(--color-bg);
   color: #000;
   -webkit-font-smoothing: antialiased;
-  overflow-x: hidden;
+  /* overflow-x stays on .app only — it breaks backdrop-filter on the dock */
   text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
 }