Html Web应用程序safari全屏底部导航已修复不工作

当我在

iphonex（R，S，11）

上运行我的网站时，我的手机页脚导航没有固定在底部，我已经将位置设置为固定和底部：0px我添加了元标记viewport fit=cover，但它不起作用。有人能帮我吗？

.mobile-bottom-nav {
    position: fixed;
    position: -ms-device-fixed;
    bottom: 0px;
    height: 80px;
    width: 100%;
    margin-bottom: -35px;
    left: 0px;
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: saturate(200%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid #c5c5c5;
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    flex-direction: row;
    z-index: 999;
}

下面的元标记：

<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover, user-scalable=no">

我的web应用程序的图片： 它在底部导航下显示一个空条

---

[]

可能与-35像素的保证金有关？我需要工作代码来调试。否如果我删除了它，它仍然是相同的。如果我删除了带有viewport fit=cover的meta标记，那么它再次位于底部，但是状态栏是空的，而不是蓝色的