fix(clerk-js): Remove navbar icon shift in safari (#5887)

Author: alexcarpenter

.changeset/stupid-gifts-juggle.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Fixes issue in Safari where navigating between profile tabs caused the navbar icons to shift unexpectedly.

packages/clerk-js/src/ui/elements/Navbar.tsx

@@ -290,7 +290,11 @@ const NavButton = (props: NavButtonProps) => {
         elementDescriptor={iconElementDescriptor}
         elementId={iconElementId}
         icon={icon}
-        sx={{ opacity: isActive ? 1 : 0.7 }}
+        sx={{
+          opacity: isActive ? 1 : 0.7,
+          // Fixes a bug in Safari where the icon shifts when navigating between routes.
+          transform: 'translateZ(0)',
+        }}
       />
       {children}
     </Button>