From c311264a7c1fb06468a6300c63e46ca9a96810bd Mon Sep 17 00:00:00 2001
From: Sebastian Mendel <info@sebastianmendel.de>
Date: Sat, 14 Mar 2026 20:16:50 +0100
Subject: [PATCH] [BUGFIX] Fix sticky header scroll flicker via CSS height
 compensation

The navbar uses position:sticky, so height changes affect document
flow. When navbar-transition reduces --mainnavigation-nav-height to
the xs value (70px), the document shrinks, causing scrollbar jumps
and scroll-position oscillation in Chromium browsers.

Add compensating margin-bottom computed from $navbar-heights map:
the difference between each breakpoint's default height and the
transition height (xs). This keeps document height constant while
the navbar still visually shrinks.

Resolves: #1424
Resolves: #1468
---
 .../Scss/components/navbar/_transition.scss       | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/Resources/Public/Scss/components/navbar/_transition.scss b/Resources/Public/Scss/components/navbar/_transition.scss
index 865717862..b32cb95e6 100644
--- a/Resources/Public/Scss/components/navbar/_transition.scss
+++ b/Resources/Public/Scss/components/navbar/_transition.scss
@@ -11,6 +11,21 @@
 }
 .navbar-transition {
     --mainnavigation-nav-height: #{map-get($navbar-heights, xs)};
+
+    // Compensate for navbar height reduction to keep document height stable.
+    // With position:sticky the navbar is in document flow — shrinking it changes
+    // the document height, causing scrollbar jumps and scroll-position oscillation
+    // in Chromium browsers (see #1424, #1468). Adding margin-bottom equal to the
+    // height difference keeps total document height constant.
+    @each $breakpoint in map-keys($navbar-heights) {
+        $default-height: map-get($navbar-heights, $breakpoint);
+        $transition-height: map-get($navbar-heights, xs);
+        @if $default-height != $transition-height {
+            @include media-breakpoint-up($breakpoint) {
+                margin-bottom: $default-height - $transition-height;
+            }
+        }
+    }
 }
 @media (min-width: $grid-float-breakpoint) {
     .navbar {