在移动设备上使用top属性滚动固定位置div的错误

Question

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

更奇怪的是，当滚动时chrome / safari自动展开时，粘贴到视口顶部/底部边缘的其他固定定位元素会自然移动并保持粘贴到视口边缘。

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

在youtube here上观看显示错误的视频。 https://youtu.be/AMJKq3vfFkQ

如果您想调试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;
}

红色方块就是那个人。

Answer 1

我弄明白了这个问题。 .parent-of-parent-div已将bottom定位为0。当在滚动时展开/压缩视图端口时，这会导致.div-which-is-supposed-to-stick-to-yellow-bar移动与底栏一起移动。滚动停止后，浏览器会重新分析CSS并将top应用于.div-which-is-supposed-to-stick-to-yellow-bar，从而导致视频中出现视觉故障。

我所做的是将.div-which-is-supposed-to-stick-to-yellow-bar移出.parent-of-parent-div并将其放在另一位相对定位的父母之下。通过阻止我的问题，这阻止.div-which-is-supposed-to-stick-to-yellow-bar在那里跳舞。