Some css being applied on live server only after file save

Question

I have a website which contains a couple of html pages, and all of them contain the same navbar html code.
In my css for the navbar, I have the backdrop-filter property with the value "blur(50px)".

For me to test if everything looks ok, I use VSCode's Live Server plugin so I can open the website in my PC, and then I use VSCode's port forwarding to create a link which I can open in my device.

On PC everything works as expected, but on my device I am having the strangest thing:
At first, the backdrop filter is not being applied.
Then when I perform a save (cmd+s) one of the website's files (it does not matter which one) - the Live Server is being "refreshed" and then the backdrop filter effect is being applied.

At first I thought the backdrop is not being applied because of browser support, but then I read and understood that only firefox is having problem with this property...

I also made sure to use -webkit-backdrop-filter: blur(50px); in addition to the regular backdrop-filter.

Can someone maybe understand why this is happening?

The html snippet of the navbar which occurs in all html pages:

<header class="header">

        <!-- Cursive logo -->
        <a href="index.html"><img class="logoImage" src="images/navbar/cursive-white.png"
                alt="Cursive Omer Bengal Text"></a>

        <!-- Hamburger icon for the navbar -->
        <input type="checkbox" id="check">
        <label for="check" class="icons">
            <i class="bx bx-menu" id="menu-icon"></i>
            <i class="bx bx-x" id="close-icon"></i>
        </label>

        <!-- Navbar -->
        <nav class="navbar">
            <a class="index" href="index.html" style="--i:0;" data-text="home">Home</a>
            <a class="about-me" href="pages/about-me.html" style="--i:1;" data-text="About me">About me</a>
            <a class="education" href="pages/education.html" style="--i:2;" data-text="Education">Education</a>
            <a class="employment" href="pages/employment.html" style="--i:3;" data-text="Employment">Employment</a>
            <a class="hobbies" href="pages/hobbies.html" style="--i:4;" data-text="Hobbies">Hobbies</a>
            <a class="projects" href="pages/projects.html" style="--i:5;" data-text="Projects">Projects</a>
        </nav>
</header>

Css for the navbar:

.header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
    z-index: -1;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 2% 3% 1% 1%;
    background: rgba(0, 0, 0, .25);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
}

.header::after {
    content: '';
    position: absolute;
}

.logoImage {
    width: 20vmax;
    height: 4vmax;
    max-width: 250px;
    max-height: 50px;
    padding-left: 20px;
}

.navbar a {
    font-size: 1.15rem;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    margin-left: 2.5rem;
    transition: color .3s ease;
}

.navbar a:hover {
    color: #000;
}

#check {
    display: none;
}

.icons {
    position: absolute;
    right: 5%;
    font-size: 2.8rem;
    color: #fff;
    cursor: pointer;
    display: none;
}

.navbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
    z-index: -1;
}

@media (max-width: 768px) {
    .icons {
        display: inline-flex;
    }

    #check:checked~.icons #menu-icon {
        display: none;
    }

    .icons #close-icon {
        display: none;
    }

    #check:checked~.icons #close-icon {
        display: block;
    }

    .navbar {
        position: absolute;
        top: 100%;
        left: 0px;
        width: 100%;
        height: 0px;
        transition: .3s ease;
        background: rgba(0, 0, 0, 0.1);
    }

    .navbar a {
        display: block;
        font-size: 1.5rem;
        margin: 1.5rem 0;
        text-align: center;
        transform: translateY(-500px);
    }

    #check:checked~.navbar {
        height: 22rem;
    }

    #check:checked~.navbar a {
        transform: translateY(0);
        opacity: 1;
        transition: transform .3s ease, color .3s ease;
        transition-delay: calc(.10s * var(--i)), 0s;
    }
}

@media (min-width: 768px) {
    .navbar a {
        font-size: 1.34rem;
        margin-left: 1.5rem;
    }
}

@media (min-width: 880px) {
    .navbar a {
        font-size: 1.6rem;
        margin-left: 1.75rem;
    }
}

@media (min-width: 992px) {
    .navbar a {
        font-size: 1.85rem;
        margin-left: 2rem;
    }
}

@media (min-width: 1200px) {
    .navbar a {
        font-size: 2.03rem;
        margin-left: 2.3rem;
    }
}

I tried messing around with the css, and also tried finding an alternatives for using the backdrop-filter, but with no success...