Mobile Chrome: Das Overlay mit fester Position verschwindet beim Scrollen in der Seitenleiste ⇐ JavaScript

[Anonymous]

Problem
Ich habe eine mobile Seitenleiste mit einem dunklen Overlay (Hintergrund). Wenn die Seitenleiste geöffnet ist und der Benutzer in der Seitenleiste scrollt, verschwindet das Overlay oder wird auf Chrome Mobile (Android) instabil. Das Problem tritt NICHT auf dem Desktop auf (auch nicht im Entwicklermodus mit mobiler Ansicht) oder wenn die Seite nicht gescrollt wird. Dies ist die Live-Site: https://www.toolpier.com/
HTML-Struktur

Code: Select all

[list]
[url=index.html]
ToolPier
[/url]



[*]
[url=tool1.html]Tool 1[/url]


[/list]

Aktuelles CSS

Code: Select all

.sidebar {
position: fixed;
top: 0;
left: 0;
width: 250px;
height: 100vh;
z-index: 1000;
background: linear-gradient(180deg, #004E89 0%, #1A7FA0 100%);
overflow-y: auto;
}

.sidebar-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
}

.sidebar-overlay.active {
opacity: 1;
visibility: visible;
}

/* Mobile styles */
@media (max-width: 767.98px) {
body:not(.sidebar-toggled) {
overflow: hidden;
}
}

JavaScript

Code: Select all

(function() {
document.addEventListener('DOMContentLoaded', function() {
var sidebar = document.querySelector('.sidebar');
var overlay = document.getElementById('sidebarOverlay');
var toggleBtn = document.getElementById('sidebarToggleTop');

function updateOverlay() {
var isOpen = sidebar && !sidebar.classList.contains('toggled');
if (overlay) {
if (isOpen) {
overlay.classList.add('active');
} else {
overlay.classList.remove('active');
}
}
}

// Toggle button
if (toggleBtn) {
toggleBtn.addEventListener('click', function() {
setTimeout(updateOverlay, 50);
});
}

// Overlay click closes sidebar
if (overlay) {
overlay.addEventListener('click', function() {
sidebar.classList.add('toggled');
updateOverlay();
});
}

// Watch for sidebar class changes
if (sidebar) {
var observer = new MutationObserver(function() {
updateOverlay();
});
observer.observe(sidebar, { attributes: true });
}
});
})();

Erwartetes Verhalten

• Benutzer öffnet Seitenleiste auf Mobilgerät
• Hinter der Seitenleiste erscheint ein dunkles Overlay
• Benutzer scrollt in der Seitenleiste
• Das Overlay sollte sichtbar und stabil bleiben

Tatsächliches Verhalten

• Benutzer öffnet Seitenleiste auf Mobilgerät
• Dunkles Overlay wird korrekt angezeigt
• Benutzer scrollt in der Seitenleiste
• Overlay verschwindet/flackert während scrollen
• Overlay erscheint wieder, wenn Scrollen stoppt

Ich habe ein paar Dinge ausprobiert:
GPU-Beschleunigung:

Code: Select all

.sidebar-overlay {
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
}

Bildlaufverkettung verhindern:

Code: Select all

.sidebar {
overscroll-behavior: contain;
-webkit-overscroll-behavior: contain;
}

body:not(.sidebar-toggled) {
overscroll-behavior: none;
}

Position des Sperrkörpers:

Code: Select all

body:not(.sidebar-toggled) {
position: fixed;
width: 100%;
height: 100%;
}

Ich verwende Vanilla JS und Bootstrap 4.6 (SB Admin 2)
Wie kann ich das Overlay mit fester Position sichtbar und stabil halten, während ich in der Seitenleiste auf Chrome Mobile scrolle? Handelt es sich um einen bekannten Chrome Mobile-Fehler oder fehlt mir eine CSS/JavaScript-Lösung?
Vielen Dank!!