In my react web app, I have a bottom nav bar that I need to be fixed on all pages. I’m using position fixed and bottom 0. The issue is that the bottom bar is moving on scrolling up and down on browsers other than Chrome. I want it to be fixed and show no movement on scrolling, as it is annoying to the user.

I tried to switch to position sticky and had same behavior. I also tried height:100dvh/100svh/100lvh/100vh on html with width 100% and overflow-x:auto, it solved my issue, however created another issue, that is it hid the vertical scroll bar of the app the thing that affected other functionalities on the home page. Did anyone encouter the same issue, and how did you solve it. Thanks!

This is my bottom bar css:

.bottom-bar {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 999;
        text-align: center;
        margin: 0 auto;
        width: 100vw;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    html {
        width: 100%;
        height: 100%;
    }