ARTICLE AD BOX
Problem
I have a mobile sidebar with a dark overlay (backdrop). When the sidebar is open and the user scrolls inside the sidebar, the overlay disappears or becomes unstable on Chrome mobile (Android). The issue does NOT occur on desktop (even in developer mode with mobile view) or when the page is not scrolled. This is the live site: https://www.toolpier.com/
HTML Structure
<!-- Sidebar --> <ul class="navbar-nav sidebar sidebar-dark" id="accordionSidebar"> <a class="sidebar-brand" href="index.html"> <div class="sidebar-brand-text">ToolPier</div> </a> <hr class="sidebar-divider"> <!-- Navigation items (many, causing sidebar to scroll) --> <li class="nav-item"> <a class="nav-link" href="tool1.html">Tool 1</a> </li> <!-- ... more nav items ... --> </ul> <!-- Overlay / Backdrop --> <div id="sidebarOverlay" class="sidebar-overlay"></div>Current CSS
.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
(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 }); } }); })();Expected Behavior
User opens sidebar on mobile
Dark overlay appears behind sidebar
User scrolls inside sidebar
Overlay should remain visible and stable
Actual Behavior
User opens sidebar on mobile
Dark overlay appears correctly
User scrolls inside sidebar
Overlay disappears/flickers during scroll
Overlay reappears when scrolling stop
I tried a few things:
GPU Acceleration:
.sidebar-overlay { transform: translateZ(0); -webkit-transform: translateZ(0); will-change: transform; }Prevent Scroll Chaining:
.sidebar { overscroll-behavior: contain; -webkit-overscroll-behavior: contain; } body:not(.sidebar-toggled) { overscroll-behavior: none; }Lock Body Position:
body:not(.sidebar-toggled) { position: fixed; width: 100%; height: 100%; }Im using Vanilla JS and Bootstrap 4.6 (SB Admin 2)
How can I keep the fixed position overlay visible and stable while scrolling inside the sidebar on Chrome mobile? Is this a known Chrome mobile bug, or is there a CSS/JavaScript solution I'm missing?
Thanks!!
