Как сделать так, чтобы фон под меню при скролле на ios был такого же цвета как меню CSS?
Сделал панельку меню в CSS, но столкнулся с такой проблемой - если на мобильной версии попытаться проскроллить вниз, то цвет под меню будет таким же как у страницы. Но как можно сделать так, чтобы цвет был таким же как у меню?
Думал сделать прямоугольник с высотой 1000px и поместить его снизу, но вдруг есть решение получше?
P.S. на скриншоте меню по центру в момент скролла страницы, а так оно находится снизу.
body {
display: flex;
flex-direction: column;
width: 100vw;
height: 100svh;
margin: 0;
background-color: grey;
}
#root {
display: flex;
flex-direction: column;
height: 100%;
}
.main {
display: flex;
flex: 1 1 auto;
padding: 24px;
}
.menu {
display: flex;
padding: 16px;
border-radius: 32px 32px 0 0;
background-color: #fff;
}<div id="root">
<main class="main"></main>
<nav class="menu"></nav>
</div>