Css 移动设备上具有top属性的固定位置div的滚动错误

这是一个奇怪的错误，当chrome/safari在滚动时自动展开视口时，我的div具有固定的位置和顶部属性（x像素），认为视口顶部没有改变

更奇怪的是，当chrome/safari在滚动时自动展开时，其他固定位置的元素会自然移动并固定在视口的上/下边缘

我的CSS会因为某种原因受到指责吗

在youtube上查看显示该漏洞的视频

如果您想调试CSS，请访问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;
}

---

红盒子就是那个家伙。

我解决了问题。父div的

.parent具有固定的定位，其
底部
为
0
。这会导致
.div在滚动时展开/压缩视图端口时，它本应粘贴在黄色条上
随底部条一起移动。滚动停止后，浏览器重新分析CSS，并将
top
应用于
.div，该控件应粘贴在黄色条上，导致视频中出现的视觉故障

我所做的是将
.div从父div
的
.parent中移出，并将其放在另一个相对位置的父div下。这阻止了
.div，它本应该粘在黄色条上，通过停止我的问题，停止了在那里跳舞
 我解决了这个问题。父div
的
.parent具有固定的定位，其
底部
为
0
。这会导致
.div在滚动时展开/压缩视图端口时，它本应粘贴在黄色条上
随底部条一起移动。滚动停止后，浏览器重新分析CSS，并将
top
应用于
.div，该控件应粘贴在黄色条上，导致视频中出现的视觉故障

我所做的是将
.div从父div
的
.parent中移出，并将其放在另一个相对位置的父div下。这阻止了
.div，它本应该粘在黄色条上，通过停止我的问题，停止了在那里跳舞