From 2fbf37a7be30890c3a76d7132e15dfe8218c0414 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sat, 21 Feb 2026 17:35:33 +0530
Subject: [PATCH] fix: broken scrollbar color in safari

new safari added the scrollbar-color property but as it also support -webkit-scrollbar they both
collide and somehow break the styling
---
 src/components/scroll/Scroll.css.ts | 33 ++++++++++++++++++++---------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/components/scroll/Scroll.css.ts b/src/components/scroll/Scroll.css.ts
index b6ad4cb..1f3d96b 100644
--- a/src/components/scroll/Scroll.css.ts
+++ b/src/components/scroll/Scroll.css.ts
@@ -23,7 +23,12 @@ export const Scroll = recipe({
       width: "100%",
       height: "100%",
       overflow: "hidden",
-      scrollbarColor: "transparent transparent",
+
+      "@supports": {
+        "not selector(::-webkit-scrollbar)": {
+          scrollbarColor: "transparent transparent",
+        },
+      },
 
       selectors: {
         "&::-webkit-scrollbar-thumb": {
@@ -54,7 +59,11 @@ export const Scroll = recipe({
     },
     visibility: {
       Always: {
-        scrollbarColor: `${ScrollThumbColor} ${ScrollTrackColor}`,
+        "@supports": {
+          "not selector(::-webkit-scrollbar)": {
+            scrollbarColor: `${ScrollThumbColor} ${ScrollTrackColor}`,
+          },
+        },
         selectors: {
           "&::-webkit-scrollbar-thumb": {
             backgroundColor: ScrollThumbColor,
@@ -65,10 +74,16 @@ export const Scroll = recipe({
         },
       },
       Hover: {
-        selectors: {
-          "&:hover": {
-            scrollbarColor: `${ScrollThumbColor} ${ScrollTrackColor}`,
+        "@supports": {
+          "not selector(::-webkit-scrollbar)": {
+            selectors: {
+              "&:hover": {
+                scrollbarColor: `${ScrollThumbColor} ${ScrollTrackColor}`,
+              },
+            },
           },
+        },
+        selectors: {
           "&:hover::-webkit-scrollbar-thumb": {
             backgroundColor: ScrollThumbColor,
           },
@@ -88,7 +103,7 @@ export const Scroll = recipe({
     size: {
       "0": {
         "@supports": {
-          "(scrollbar-color: transparent transparent)": {
+          "not selector(::-webkit-scrollbar)": {
             scrollbarWidth: "none",
           },
         },
@@ -100,9 +115,7 @@ export const Scroll = recipe({
       },
       "300": {
         "@supports": {
-          "(scrollbar-color: transparent transparent)": {
-            // only apply scrollbarWidth if scrollbar-color is supported,
-            // otherwise it breaks the colors in some browser like safari.
+          "not selector(::-webkit-scrollbar)": {
             scrollbarWidth: "thin",
           },
         },
@@ -119,7 +132,7 @@ export const Scroll = recipe({
       },
       "400": {
         "@supports": {
-          "(scrollbar-color: transparent transparent)": {
+          "not selector(::-webkit-scrollbar)": {
             scrollbarWidth: "auto",
           },
         },