Html MobileSafari上的网站意外响应窗高变化

在iPhone上的Safari中向下滚动时，标题栏和底部栏会在滚动时消失。当用户在滚动的中间停顿，并且条还没有完全隐藏时，就会出现奇怪的行为。

<div id="testelement">hello</div>

仅当条形图完全显示或隐藏时，才按预期渲染：

但是在滚动过程中，testelement没有正确响应。窗口底部和测试元素之间有空间：

这很奇怪，因为在其他情况下，它的工作原理与预期一致。例如，仅设置

bottom:0

和

height:100px

时，元素在滚动期间将正确粘贴到窗口底部<代码>窗口。在滚动期间，innerHeight也会持续正确更新。 为什么这个案例不同？

#testelement {
background-color: pink;
position: fixed;
bottom: 0;
left: 0;
top: 0;
width: 100px; 
}