css - モバイル デバイスでの top 属性を持つ固定位置 div のスクロール バグ

Question

これは、スクロール時にクロム/サファリがビューポートを自動拡張するときに、固定位置と x ピクセルとしての top 属性を持つ私の div が、ビューポートの上部が変更されなかったと考える奇妙なバグです。

さらに奇妙なのは、ビューポートの上/下の端にくっつく他の固定配置要素が自然に移動し、クロム/サファリがスクロール時に自動拡張するときにビューポートの端にくっついたままになることです。

なんらかの理由で私の CSS が非難されるのでしょうか?

YouTube でバグを示すビデオをここで表示します。https://youtu.be/AMJKq3vfFkQ

CSS をデバッグしたい場合、Web サイトは babbly.com で公開されています。簡略化した CSS をここに貼り付けました。

.div-which-is-supposed-to-stick-to-yellow-bar {
    height: 59px;
    top: 50px;
    padding: 5px 0;
    left: 0;
    z-index: 1;
    border-bottom: 1px solid #e3e3e3;
    transition: left .4s;
    width: 100%;
    background: #fff;
    position: fixed;
    display: block;
}

.parent-of-above-div {
    position: relative;
    height: 59px;
    width: 100px;
}

.parent-of-parent-div {
    position: fixed;
    width: 100%;
    height: 45px;
    top: auto;
    bottom: 0;
    left: 0;
    z-index: 3;
}

赤い箱が男です。