Sticky avatars problem

Support
1

We have a custom theme, and the header shrinks as we scroll. We think that the recently-integrated stick avatars feature is causing some thrashing behaviour just as the header shrinks. See attached video:

I’ve tried disabling the sticky avatars using the CSS I found in https://meta.discourse.org/t/sticky-avatars-posts-avatars-following-scroll:

.topic-post.sticky-avatar {
    .topic-avatar {
        position: relative !important;
        top: unset !important; /* May be needed in some cases */
    }
}

That hides the sticky avatar, but doesn’t seem to help with the thrashing. Is there something else I should to either make this work, or disable the feature fully?

I’m not 100% sure this is the sticky avatars change - so do please comment if you think it might be something else.

A repro is at Google launches Chromebook self-repair programme for schools - Right to repair: policy & activism - The Restarters Community. Chrome is the best to repro in - Firefox seems to suppress the error after the first occurrence.

2

I think the problem is unrelated to sticky avatars.

When the header shrinks, the page becomes shorter, and the scroll position of the page changes. So what happens is you get this flickering as the page jumps in and out of the position where the header should shrink.

If I output the scroll position of the page to my browser console, you can see this in action… the header is shrinking by about 60px, and that’s reflected in the scroll position as it flickers:

Screen Shot 2022-02-21 at 10.59.45 AM
Screen Shot 2022-02-21 at 10.59.45 AM498×532 11.6 KB

To solve this in the JS I think you could probably add the height difference to the scroll position at the same time the header transition happens?

Another way to fix this using CSS only would be to:

.d-header-wrap {
  // this makes the header position fixed, so it's not part of the page height
  position: fixed;
  width: 100%;
}

#main-outlet {
  // this offsets the page content by the height of the large header
  // needed because the fixed position puts the header on top of the content
  padding-top: 150px !important; 
}
3

Thanks very much, that CSS does indeed fix it. Most kind.