页面底部可变高度元素为何影响scrollTop？含iOS/Android兼容问题

我有如下HTML结构：

<div> some fixed height pics </div>
<div> some fixed height pics </div>

<div class='tabs'>
    <div class='tab'> tab 1 content height:300px </div>
    <div class='tab'> tab 2 content height:500px </div>
</div>

<div class='tab-content'> tab content </div>

当滚动到页面底部后点击切换tab，tab的位置会发生偏移；但如果把tab模块移到两张图片之间，结构如下：

<div> some fixed height pics </div>

<div class='tabs'>
    <div class='tab'> tab 1 content height:300px </div>
    <div class='tab'> tab 2 content height:500px </div>
</div>

<div class='tab-content'> tab content </div>

<div> some fixed height pics </div>

此时切换tab，tab的位置就不会出现偏移。

我尝试过调用滚动函数来修复这个问题，但体验很差。想请教：为什么页面底部的可变高度元素会影响scrollTop的值？

另外，我曾把tab-content设置为固定的500px高度，这个方案在Android设备上生效，但iOS设备仍存在问题：切换tab时页面整体位置看似不变，但tab本身还是会出现类似"页面下沉"的位移现象。

内容的提问来源于stack exchange，提问作者Roc Joe