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.

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] 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; }

Sticky avatars problem

Product Support

Edward_Hibbert (Edward Hibbert) February 21, 2022, 4:38pm 3

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

Topic		Replies	Views
Sticky avatars not too sticky UX	1	531	July 13, 2022
Hosted: Message body resizing while scrolling Product Support	5	1219	November 23, 2021
Sticky avatars: posts avatars following scroll Feature	9	2198	November 23, 2021
How to remove sticky top bar? Product Support	4	2191	May 22, 2020
Page extends endlessly without sticky header Product Support	4	650	July 12, 2022

Sticky avatars problem

Related topics