由于iOS Safari菜单栏，页面显示不会按预期运行

Question

我正在实施一个Ionic网络应用，我遇到了只在iOS Safari中出现的$ ionicPopup的问题。

问题

我的弹出窗口的标题和按钮，由于浏览器的菜单栏，它们应该有一个固定的位置，以便它们总是出现在屏幕上。根据用户滑动的方式，它是隐藏的标题或按钮。

我在实际的iPhone 6和an iPhone emulator上进行了测试，从中获取了以下屏幕截图。

以下是发生的事情：

请注意，当浏览器栏显示时，所有内容都会正常显示。

此外，一切在iOS Chrome上正常运行（屏幕截图here和here）。

我的弹出窗口的CSS几乎类似于原生的Ionic CSS规则，只有一两个小修改（颜色，大小等）：

.popup-container .popup {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    min-height: 200px;
    border-radius: 0px;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex; /* Plus all webkits, moz and ms equivalents */
    flex-direction: column; /* Plus all webkits, moz and ms equivalents */
}

.popup .popup-head {
    padding: 15px 10px;
    border-bottom: 1px solid #eee;
    text-align: center;
    background-color: #5a9bd5;
    color: white;
}


.popup .popup-body{
    font-family: Arial, Helvetica, sans-serif;
    opacity: 1;
    font-size: 18px;
    text-align: center;
    padding: 10px 30px 10px 30px;
    overflow: auto;
}

.popup .popup-buttons{
    display: flex; /* Plus all webkits, moz and ms equivalents */
    flex-direction: row; /* Plus all webkits, moz and ms equivalents */
    padding: 10px;
    min-height: 65px;
}

我的问题

如何在iOS Safari上显示我的标题和按钮，如下图所示？

我的研究和尝试

经过一番研究，我发现我的问题可能是由于某些移动浏览器存在更大的问题，其中菜单栏导致CSS出现一些行为问题，并且通常会与用户交互。

正在各个地方进行讨论（1，2，3）。

尝试＃1

我尝试了一个我在this discussion找到的JS脚本，这似乎解决了作者的问题，对我没有任何成功：

var height = window.innerHeight;
var a = setInterval(function() {
    $(window).scrollTop(-1);
    resize();
}, 500); // Don't lower more than 500ms, otherwise there will be animation-problems with the  Safari toolbar

$(window).on('resize', function() {
    resize();
});

var resize = function() {
    if(window.innerHeight != height) {
        height = window.innerHeight;
        $('.section').css('height', height + 'px');
    }
};