粘滞头像问题

[Edward_Hibbert]

我们有一个自定义主题，标题在滚动时会缩小。我们认为最近集成的粘性头像功能在标题缩小的时候导致了一些抖动行为。请看附件视频：

我尝试使用我在 https://meta.discourse.org/t/sticky-avatars-posts-avatars-following-scroll 中找到的 CSS 来禁用粘性头像：

.topic-post.sticky-avatar {
    .topic-avatar {
        position: relative !important;
        top: unset !important; /* 在某些情况下可能需要 */
    }
}

这会隐藏粘性头像，但似乎无助于解决抖动问题。有什么其他方法可以解决这个问题，或者完全禁用该功能吗？

我不能 100% 确定这是粘性头像更改导致的问题 - 如果您认为可能是其他原因，请发表评论。

复现地址是 https://talk.restarters.net/t/google-launches-chromebook-self-repair-programme-for-schools/7442。Chrome 是复现的最佳浏览器 - Firefox 似乎会在第一次出现后抑制该错误。

[awesomerobot (Kris)]

我认为问题与粘性头像无关。

当页眉收缩时，页面会变短，页面的滚动位置会发生变化。因此，当页面在页眉应该收缩的位置之间跳转时，您会看到这种闪烁。

如果我在浏览器控制台中输出页面的滚动位置，您可以看到这一点……页眉缩小了约 60 像素，这在滚动位置中有所体现，因为它在闪烁：

要使用 JavaScript 解决此问题，我认为您可以在页眉过渡发生的同时将高度差添加到滚动位置？

使用纯 CSS 解决此问题的另一种方法是：

.d-header-wrap {
  // 这使页眉位置固定，因此它不是页面高度的一部分
  position: fixed;
  width: 100%;
}

#main-outlet {
  // 这会将页面内容偏移大页眉的高度
  // 需要，因为固定位置将页眉放在内容之上
  padding-top: 150px !important;
}

[Edward_Hibbert]

非常感谢，该 CSS 确实解决了问题。非常感谢。