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

【问题标题】：Scrolling bug for fixed position div with top attribute on mobile devices移动设备上具有 top 属性的固定位置 div 的滚动错误
【发布时间】：2015-09-08 01:26:55
【问题描述】：

这是一个奇怪的错误，我的 div 具有固定定位和顶部属性为 x 像素，认为当 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;
}

红框是那个人。

【问题讨论】：

标签： css iphone mobile-safari mobile-chrome

【解决方案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 在那里跳舞。

【讨论】：