From 04020fe8f2e755c318720ad1d9bca58133e2110c Mon Sep 17 00:00:00 2001
From: Jeri Peier <jeremias.peier@sbb.ch>
Date: Mon, 27 Jan 2025 14:29:55 +0100
Subject: [PATCH] fix: avoid moving content when blocking scrolling (#3369)

With previously introduced changes to scroll block, in certain situation
the content is slightly moving. This happens when there is a scroll bar
visible and some content is aligned next to the scrollbar.
Setting the height to 100dvh ensures that the body is always taking the
full available height which is necessary e.g. for the sidebar.
Setting `position: relative` reverts the previous change where this was
removed. This change mainly avoids moving content.
---
 src/elements/core/dom/scroll.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/elements/core/dom/scroll.ts b/src/elements/core/dom/scroll.ts
index 8b6fbed7b2..6ec2aa352f 100644
--- a/src/elements/core/dom/scroll.ts
+++ b/src/elements/core/dom/scroll.ts
@@ -8,6 +8,7 @@ export function pageScrollDisabled(): boolean {
  */
 export class SbbScrollHandler {
   private _height!: string;
+  private _position!: string;
   private _overflow!: string;
   private _marginInlineEnd!: string;
 
@@ -18,13 +19,15 @@ export class SbbScrollHandler {
 
     // Save any pre-existing styles to reapply them to the body when enabling the scroll again.
     this._height = document.body.style.height;
+    this._position = document.body.style.position;
     this._overflow = document.body.style.overflow;
     this._marginInlineEnd = document.body.style.marginInlineEnd;
 
     const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
 
     document.body.style.overflow = 'hidden';
-    document.body.style.height = '100%';
+    document.body.style.height = '100dvh';
+    document.body.style.position = 'relative';
     document.body.style.marginInlineEnd = `${scrollbarWidth}px`;
     document.body.style.setProperty('--sbb-scrollbar-width', `${scrollbarWidth}px`);
 
@@ -38,6 +41,7 @@ export class SbbScrollHandler {
 
     // Revert body inline styles.
     document.body.style.height = this._height || '';
+    document.body.style.position = this._position || '';
     document.body.style.overflow = this._overflow || '';
     document.body.style.marginInlineEnd = this._marginInlineEnd || '';
     document.body.style.setProperty('--sbb-scrollbar-width', '0');