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