javascript - iPhone X 的粘性底部栏不独立

Question

我正在为 iPhone X 构建一个基于 Web 的独立应用程序。在我的手机浏览器上对其进行测试时，粘性底部栏停留在底部。但是，在单机版中，栏底部和屏幕底部之间有一个白色间隙，如下所示：

栏底部和屏幕底部之间有一个白色间隙。

该栏应贴在手机屏幕的底部。它应该看起来像这样（忽略按钮）：

该栏应贴在手机屏幕的底部。

我无法弄清楚为什么会这样。单击此处进行演示。

根据要求，这是底栏的 CSS：

.bottom-bar {
    width:100%;
    margin:0;
    position:fixed;
    bottom:0;
    height:75pt;
    z-index:1;
    background:#008080;
    box-shadow: 0 -5px 5px -5px rgba(0,0,0,0.62);
}

非常感谢大家。:)

标签： javascripthtmlioscssweb-applications