fix(styles): handle firefox style without warning in chrome

AxisCommunications · Apr 11, 2024 · 8fa3ba3 · 8fa3ba3
1 parent fac41da
commit 8fa3ba3
Showing 1 changed file with 5 additions and 3 deletions.
diff --git a/styles/src/static/static.styles.ts b/styles/src/static/static.styles.ts
@@ -1,13 +1,15 @@
 import { makeStaticStyles, tokens } from "@fluentui/react-components";
 
 const scrollbarColor = tokens.colorScrollbarOverlay;
+
+const isFirefox = window.navigator.userAgent.includes("Fire");
 export const useScrollStaticStyles = makeStaticStyles({
-  "@-moz-document url-prefix() {*": {
+  "*": {
     // Firefox
     // Scrollbar styling is amazingly complex. Read more here:
     // https://stackoverflow.com/questions/6165472/custom-css-scrollbar-for-firefox
-    scrollbarWidth: "thin",
-    scrollbarColor: `${scrollbarColor} transparent`,
+    scrollbarWidth: isFirefox ? "thin" : "unset",
+    scrollbarColor: isFirefox ? `${scrollbarColor} transparent` : "auto",
   },
   "*::-webkit-scrollbar": {
     width: tokens.spacingHorizontalSNudge,