React Web 应用程序中的底部导航栏，定位固定且位于底部 0，在 Chrome 以外的浏览器上滚动时移动

Question

在我的 React Web 应用程序中，我有一个底部导航栏，需要在所有页面上修复。我使用的是固定位置和底部 0。问题是底部栏在 Chrome 以外的浏览器上上下滚动时移动。我希望它被修复并且在滚动时不显示任何移动，因为这对用户来说很烦人。

我尝试切换到粘性位置并有相同的行为。我还在宽度为100%和overflow-x:auto的html上尝试了height:100dvh/100svh/100lvh/100vh，它解决了我的问题，但是创建了另一个问题，那就是它隐藏了影响应用程序的垂直滚动条主页上的其他功能。有没有人遇到同样的问题，是怎么解决的。谢谢！

这是我的底栏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%;
    }

Answer 1

尝试删除这个CSS

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