移动设备上的Safari滚动条获取粘性标题

Question

我创建了一个带有粘性标题的网页，该网页在桌面上工作正常但在移动设备上效果不佳。例如，在iPhone上，如果您将手机设置为横向模式，Safari的工具栏将覆盖我的粘贴标题。同样在instagram上打开我的页面链接也会导致同样的问题（Instagram标题将覆盖我的）。

Heres是HTML

<div id="container">



<div id="infotab-mobile">
<div id=rosemenu>
<div id="rose">
<img class="inforose" id= "roseimg" src="images/rose.png">
</div>
</div>
</div>

和CSS：

#infotab-mobile{
display: initial;
justify-content: space-around;
flex-wrap: wrap;
width: 100%;
position: fixed;
z-index: 999;
}

#rosemenu{
position: fixed;
width: 100%;
height: 20%;
display: inline-block;
}

#rose{
position: relative;
width: 100%;
vertical-align: top;
text-align: center;
background: rgba(232, 232, 232, 0.96);
padding-top: 2%;
padding-bottom: 2%;
}

#roseimg{
 margin: 0 auto;
 text-align: center;
 display: -webkit-box;
}

我还注意到使用-webkit-overflow-scrolling：touch;禁用ios功能，允许您通过点击Safari工具栏滚动到网页顶部。有没有人发现任何工作？