Use negative top instead of transform for nav bar hide animation (#797)

tvancott42 · web-flow · commit 521b409f0037 · 2026-06-14T13:07:58.000-05:00
diff --git a/src/NetworkOptimizer.Web/wwwroot/css/app.css b/src/NetworkOptimizer.Web/wwwroot/css/app.css
@@ -3108,12 +3108,12 @@ select.form-control {
         height: auto;
         padding: 0.75rem 1rem;
         gap: 0.5rem;
-        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+        transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
     }
 
     .top-bar.top-bar-hidden {
         position: sticky;
-        transform: translateY(-100%);
+        top: -100%;
         pointer-events: none;
     }
 

Original file line number	Diff line number	Diff line change
`@@ -3108,12 +3108,12 @@ select.form-control {`
`3108`	`3108`	`height: auto;`
`3109`	`3109`	`padding: 0.75rem 1rem;`
`3110`	`3110`	`gap: 0.5rem;`
`3111`		`- transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);`
	`3111`	`+ transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1);`
`3112`	`3112`	`}`
`3113`	`3113`
`3114`	`3114`	`.top-bar.top-bar-hidden {`
`3115`	`3115`	`position: sticky;`
`3116`		`- transform: translateY(-100%);`
	`3116`	`+ top: -100%;`
`3117`	`3117`	`pointer-events: none;`
`3118`	`3118`	`}`
`3119`	`3119`