Safari移动版上的React应用程序扩展了100％

Question

我遇到了一个问题，我的应用程序超出了屏幕上100％的窗口，并且底部下方也隐藏了一些额外的空间（看起来总的额外空间等于Safari上的顶部URL栏） ）。这是手机上我的应用的屏幕截图：

您可以看到顶部栏可以滚动到窗口之外，如何防止这种行为？注意：它不会在Chrome移动设备上执行此操作-停留在窗口中

这是我的应用呈现方式：

return(
    <div className = {classes.FullApp}>
        <TopBar toggle={this.toggleSideBar} isOpen={this.state.sidebar} logout={this.handleLogout}/>
        <main className={classes.Main}>
            {sidebar}
            {dash}
        </main>
    </div>
)

这是.FullApp的CSS：

.FullApp{
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}
.Main{
    position: relative;
    height:90vh;
    width:100%;
    background-color: chocolate;
    display:flex;
    z-index:135;
}
.Side{
    width: 50vw;
}

TopBar CSS：

.TopBar{
    background-color:#49d49d;
    height:10vh;
    width:100%;
    display:flex;
    justify-content: space-between;
    align-items: center;
    z-index:175;
    box-shadow: 0px 0px 42px 0px rgba(0,0,0,1);
}