I have a Navbar thats on the bottom of the site on mobile.
For some reason it’s not fixed to the Bottom and moves when i scroll.
It’s only a little gap but it is really annoying to look at.

My Css looks like this:

.navbar{
    position: fixed;
    background-color: var(--bg-secondary);
    transition: width 175ms ease;
    z-index: 999;
}
@media only screen and (max-width: 980px) and (min-width: 368px) {
    .navbar{
        bottom: 0;
        width: 100vw;
        height: 3.7rem;
        margin-left: -0.5rem;
    }
}

Funny enough when using the mobile inspector on Desktop chrome or firefox it does stay fixed. It has to be a problem with mobile browser.
Tried it on Chrome, Firefox and Samsung Internet

Has anyone expirienced a similar problem?