diff --git a/docs/data/components/scroll-area/ScrollAreaInlay.js b/docs/data/components/scroll-area/ScrollAreaInlay.js
index 9951d90f8..2b6a3f356 100644
--- a/docs/data/components/scroll-area/ScrollAreaInlay.js
+++ b/docs/data/components/scroll-area/ScrollAreaInlay.js
@@ -62,12 +62,17 @@ const ScrollAreaViewport = styled(ScrollArea.Viewport)`
   width: 100%;
   height: 100%;
   scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 `;
 
 const ScrollAreaScrollbar = styled(ScrollArea.Scrollbar)`
   width: 10px;
   height: calc(100% - var(--scroll-area-corner-height));
   background: rgb(220 220 220);
+  box-sizing: border-box;
 
   &[data-orientation='horizontal'] {
     width: calc(100% - var(--scroll-area-corner-width));
diff --git a/docs/data/components/scroll-area/ScrollAreaInlay.tsx b/docs/data/components/scroll-area/ScrollAreaInlay.tsx
index 9951d90f8..2b6a3f356 100644
--- a/docs/data/components/scroll-area/ScrollAreaInlay.tsx
+++ b/docs/data/components/scroll-area/ScrollAreaInlay.tsx
@@ -62,12 +62,17 @@ const ScrollAreaViewport = styled(ScrollArea.Viewport)`
   width: 100%;
   height: 100%;
   scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 `;
 
 const ScrollAreaScrollbar = styled(ScrollArea.Scrollbar)`
   width: 10px;
   height: calc(100% - var(--scroll-area-corner-height));
   background: rgb(220 220 220);
+  box-sizing: border-box;
 
   &[data-orientation='horizontal'] {
     width: calc(100% - var(--scroll-area-corner-width));
diff --git a/docs/data/components/scroll-area/ScrollAreaIntroduction/system/index.js b/docs/data/components/scroll-area/ScrollAreaIntroduction/system/index.js
index c67684650..2f7e71664 100644
--- a/docs/data/components/scroll-area/ScrollAreaIntroduction/system/index.js
+++ b/docs/data/components/scroll-area/ScrollAreaIntroduction/system/index.js
@@ -48,6 +48,10 @@ const ScrollAreaViewport = styled(ScrollArea.Viewport)`
   width: 100%;
   height: 100%;
   scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 `;
 
 const ScrollAreaScrollbar = styled(ScrollArea.Scrollbar)`
@@ -55,6 +59,7 @@ const ScrollAreaScrollbar = styled(ScrollArea.Scrollbar)`
   padding: 2px;
   visibility: hidden;
   background: transparent;
+  box-sizing: border-box;
   transition:
     opacity 0.2s,
     background 0.2s,
@@ -70,10 +75,6 @@ const ScrollAreaScrollbar = styled(ScrollArea.Scrollbar)`
     height: 10px;
   }
 
-  &[data-scrolling] {
-    transition: none;
-  }
-
   &[data-hovering],
   &[data-scrolling],
   &:hover {
diff --git a/docs/data/components/scroll-area/ScrollAreaIntroduction/system/index.tsx b/docs/data/components/scroll-area/ScrollAreaIntroduction/system/index.tsx
index c67684650..2f7e71664 100644
--- a/docs/data/components/scroll-area/ScrollAreaIntroduction/system/index.tsx
+++ b/docs/data/components/scroll-area/ScrollAreaIntroduction/system/index.tsx
@@ -48,6 +48,10 @@ const ScrollAreaViewport = styled(ScrollArea.Viewport)`
   width: 100%;
   height: 100%;
   scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 `;
 
 const ScrollAreaScrollbar = styled(ScrollArea.Scrollbar)`
@@ -55,6 +59,7 @@ const ScrollAreaScrollbar = styled(ScrollArea.Scrollbar)`
   padding: 2px;
   visibility: hidden;
   background: transparent;
+  box-sizing: border-box;
   transition:
     opacity 0.2s,
     background 0.2s,
@@ -70,10 +75,6 @@ const ScrollAreaScrollbar = styled(ScrollArea.Scrollbar)`
     height: 10px;
   }
 
-  &[data-scrolling] {
-    transition: none;
-  }
-
   &[data-hovering],
   &[data-scrolling],
   &:hover {