Фонопофильтр CSS показывает темнею область в начале div ⇐ CSS

[Anonymous]

Я пытаюсь создать заголовок Glassmorphic Style. На большом экране он работает без каких -либо проблем, но на экране мобильного телефона показывается темная область в начале div. Как ниже 420px.
Это изображение на Desktop

это изображение на мобильном языке]
. />
Это код React. И ниже приведены стили. < /P>
import React from "react";
import * as styles from "./Header.module.css";
import { Link as GatsbyLink } from "gatsby";

enum Routes {
HOME_PAGE = '/',
WORK = 'work',
ABOUT = 'about'
}

const Header = () => {

return (

• Home
• Work
• About

);
};

export default Header;
< /code>
Использование следующих стилей < /p>
.glassMorphism {
background-color: rgb(17 25 40 / 31%);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(16px) saturate(50%);
/* -webkit-backdrop-filter: blur( 20px ); */
border: 1px solid rgba(255, 255, 255, 0.125);
border-radius: 10px;
}

header {
width: 98vw;
/* padding-left: 10px; */
}

header>div {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;

}

nav {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}

nav a {
color: aliceblue;
text-decoration: none;
padding: 8px 0px;
}

ul {
border-radius: 24px;
border: 1px solid rgb(91 91 91 / 13%);
padding: 8px 0px;
}

li {
display: inline;
padding: 9px;
}
< /code>
Это HTML из браузера. < /p>

• Home
  обновление < /strong>
  Я обнаружил, что вложенные фоновые фильтр вызывает проблемы. Удаление любого из фонового фильтра удаляет темную область. Есть ли другой способ использовать вложенные фоновые фильмы?
  
  Подробнее здесь: [url]https://stackoverflow.com/questions/78780821/css-backdrop-filter-showing-a-darken-area-at-start-of-div