粘性底栏不能单独固定在iPhone X上

Question

我正在为iPhone X构建一个基于Web的独立应用程序。在我的手机浏览器上进行测试时，粘性底部栏位于底部。但是，在独立模式下，条形图底部与屏幕底部之间存在白色间隙，如下所示：

There is a white gap between the bottom of the bar and the bottom of the screen.

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

The bar should stick to the bottom of the phone screen.

我无法弄清楚为什么会这样。 Click here for a demo.

根据要求，这里是底栏的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);
}

非常感谢你们。 ：）