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

בעיית אוואטרים דביקים

תמיכה

Edward_Hibbert (Edward Hibbert) 21 בפברואר,‏ 2022,‏ 4:38pm 3

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

נושא		תגובות	צפיות
Sticky avatars not too sticky UX	1	531	13 ביולי,‏ 2022
Hosted: Message body resizing while scrolling Product Support	5	1219	23 בנובמבר,‏ 2021
Sticky avatars: posts avatars following scroll Feature	9	2203	23 בנובמבר,‏ 2021
How to remove sticky top bar? Product Support	4	2193	22 במאי,‏ 2020
Page extends endlessly without sticky header Product Support	4	654	12 ביולי,‏ 2022

בעיית אוואטרים דביקים

נושאים קשורים