Mobile Chrome: наложение фиксированной позиции исчезает при прокрутке внутри боковой панели. ⇐ Html

[Anonymous]

Проблема
У меня есть мобильная боковая панель с темным наложением (фоном). Когда боковая панель открыта и пользователь прокручивает ее внутри, наложение исчезает или становится нестабильным на мобильном устройстве Chrome (Android). Проблема НЕ возникает на настольном компьютере (даже в режиме разработчика с мобильным представлением) или когда страница не прокручивается. Это действующий сайт: https://www.toolpier.com/
HTML-структура

Код: Выделить всё

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



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


[/list]

Текущий 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 });
}
});
})();

Ожидаемое поведение

• Пользователь открывает боковую панель на мобильном устройстве
• За боковой панелью появляется темное наложение
• Пользователь прокручивает боковую панель
• Наложение должно оставаться видимым и стабильно

Фактическое поведение

• Пользователь открывает боковую панель на мобильном устройстве
• Темное наложение отображается правильно
• Пользователь прокручивает боковую панель
• Оверлей исчезает/мерцает во время прокрутки
• Оверлей появляется снова при остановке прокрутки

Я пробовал несколько вещей:
Ускорение графического процессора:

Код: Выделить всё

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

Предотвращение цепочки прокрутки:

Код: Выделить всё

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

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

Зафиксировать положение тела:

Код: Выделить всё

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

Я использую Vanilla JS и Bootstrap 4.6 (SB Admin 2)
Как сохранить видимость и стабильность наложения с фиксированным положением при прокрутке внутри боковой панели на мобильном устройстве Chrome? Это известная мобильная ошибка Chrome или мне не хватает решения CSS/JavaScript?
Спасибо!!!

Подробнее здесь: https://stackoverflow.com/questions/798 ... de-sidebar