Hide the scrollbars only in Safari

cloudscape-design · Feb 21, 2025 · 4156fb5 · 4156fb5
1 parent 6220097
commit 4156fb5
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/pages/app/index.tsx b/pages/app/index.tsx
@@ -57,7 +57,9 @@ function App() {
   // Also, AppLayout pages should resemble the ConsoleNav 2.0 styles
   const isAppLayout = isAppLayoutPage(pageId);
   const ContentTag = isAppLayout ? 'div' : 'main';
-  const isMacOS = navigator.userAgent.toLowerCase().indexOf('macintosh') > -1;
+
+  const lowerCaseUserAgent = navigator.userAgent.toLowerCase();
+  const isSafari = lowerCaseUserAgent.indexOf('safari') > -1 && lowerCaseUserAgent.indexOf('chrome') === -1;
 
   useEffect(() => {
     applyMode(mode ?? null);
@@ -72,12 +74,12 @@ function App() {
   }, [motionDisabled]);
 
   useEffect(() => {
-    if (isMacOS) {
-      document.body.classList.add(styles.macos);
+    if (isSafari) {
+      document.body.classList.add(styles.safari);
     } else {
-      document.body.classList.remove(styles.macos);
+      document.body.classList.remove(styles.safari);
     }
-  }, [isMacOS]);
+  }, [isSafari]);
 
   if (!mode) {
     return <Redirect to="/light/" />;

diff --git a/pages/app/styles.scss b/pages/app/styles.scss
@@ -21,8 +21,8 @@ body {
   }
   // stylelint-enable @cloudscape-design/no-implicit-descendant, selector-max-type
 
-  html:has(&.macos) {
-    // override scrollbars in macos for stable screenshot tests
+  html:has(&.safari) {
+    // Hide scrollbars in Safari for stable screenshot tests
     // stylelint-disable-next-line @cloudscape-design/no-implicit-descendant
     ::-webkit-scrollbar {
       inline-size: 0;