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

@@ -29,8 +29,7 @@
       rgba(255, 247, 241, 0.42) 45%,
       rgba(255, 255, 255, 0.28) 100%
     );
-  backdrop-filter: blur(20px) saturate(170%);
+  /* backdrop-filter set inline in TSX — build minify was dropping the standard property */
-  -webkit-backdrop-filter: blur(20px) saturate(170%);
   box-shadow:
     0 10px 36px rgba(143, 65, 12, 0.14),
     0 2px 8px rgba(0, 0, 0, 0.04),

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">

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%;
 }