CSS backdrop-filter changing layout/hierarchy

Question

I currently working on my first WordPress Theme and stumbled across something I can't wrap my head around... I habe a <nav> element. In the <nav> element is <div class="burger"> . The .burger is positioned fixed on the bottom of the page. When i now add backdrop-filter: blur(5px); to nav .burger starts to stick to nav again. bottom: 0; now doesn't stick it to the bottom of the html but to the bottom of nav ... what? How it's supposed to be Positioned After toggling the backdrop-filter

Html:

<nav>
<div class="burger">
    <div class="burger-ln" id="ln1"></div>
    <div class="burger-ln" id="ln2"></div>
    <div class="burger-ln" id="ln3"></div>
</div>
</nav>

CSS:

nav {
    --nav-background-color: rgba(90, 68, 185, 0.4);
    --nav-background-color-dark: gray;
    --nav-text-color: white;
    --akzent-color: pink;
    --border-radius: 5px;
    --nav-padding: 5px;
    --nav-margin-bottom: calc((var(--nav-padding)) * 3);
    --nav-margin-top: 5%;
    --burger-margin-bottom: var(--nav-padding);
    --burger-margin-right: var(--nav-padding);
    --burger-hight: 100px;
    --burger-width: 100px;
    --burger-ln-high: 10px;
    --burger-padding: 25px;
}

nav {
    background-color: var(--nav-background-color);
    color: var(--nav-text-color);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border-radius: var(--border-radius);
    text-decoration: none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: var(--nav-padding);
    margin-top: var(--nav-margin-top);
    overflow: hidden;
    margin-bottom: var(--nav-margin-bottom);
}

nav .burger {
    background-color: var(--nav-background-color);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border-radius: var(--def-border-radius);
    position: fixed;
    right: 0;
    bottom: 0;
    margin-right: var(--burger-margin-right);
    margin-bottom: var(--burger-margin-bottom);
    padding: var(--burger-padding);
    width: var(--burger-width);
    height: var(--burger-hight);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    filter: drop-shadow(10px, 10px, 2px, black)
}

The backdrop-filter property shouldn't change anything in the layout, should it? Is this a Chrom bug? I am properly just missing something...

Answer 1

Unfortunately, backdrop-filter applies the filter to everything behind the element, and in order to do that, it might be restoring the flow of .burger (not sure). Now I might ask. Is it necessary for .burger to be inside nav ? If its position is fixed, it no longer needs a parent for ordering the flow. I would recommend to put .burger outside of nav , being a direct child of body , if possible.