--header-offset is slow on Safari with sticky elements (iPadOS 15.6)

[vincefrommtl]

Sticky elements (CSS position: sticky) on Discourse always been a little janky on my iPad (9th gen all up-to-date). Trembling a little when scrolling, reacting badly, with delays, to sudden change in scrolling direction.

With the introduction of the new sidebar (also a sticky element), it became more jarring, since it’s such a sizable chunk of the UI that’s not super stable.

The culprit is the --header-offset variable. Removing this variable in CSS makes the sticky elements of the UI stable, has it should.

The header is 4em height by default. I replaced the --header-offset variable in CSS for the Timeline, Sticky-avatar and the sidebar with 4em to calculate their position:

.d-header
{
    box-sizing: border-box;
    height: 4em;
}

.sidebar-wrapper
{
    top: 4em;
    height: calc(100vh - 4em);
}

@media screen and (min-width: 925px)
{
.container.posts .topic-navigation
    {
        top: 6em;
    }
}

.topic-post.sticky-avatar .topic-avatar
{
    top: 3.75em;
}

(box sizing is there because I have a border on my header, not related)

I’m curious about the fonction of this variable, the Header never changes height AFAIK, outside of changing the text size, and using em for its height takes care of that.

I don’t know if there is a way to optimize --header-offset on Safari mobile, but my workaround fixes this small performance problem. Discourse looks a lot more polished when sticky elements are really sticky

(I have zero problem with those elements on Firefox or Chrome on my desktop, so it could be a Safari bug)

[awesomerobot (Kris)]

@vincefrommtl

I’m curious about the fonction of this variable, the Header never changes height AFAIK, outside of changing the text size, and using em for its height takes care of that.

This tends to be related to custom themes, but as you noted there are also cases like font-size that can impact the header height. In cases where the header is taller or shorter than default, we calculate the header-offset in JS to adjust other elements on the page so they’re not falling under the header.

Anyway, I can see the problem, this is definitely jarring:

but if I set --header-offset to a static value in CSS:

Maybe we’re calculating and updating the offset too often? We’ll do some investigation… Safari on iOS does a lot of optimization that might be causing issues.

[pmusaraj (Penar Musaraj)]

I have just added a fix for this: FIX: Calculate header offset once on load by pmusaraj · Pull Request #18669 · discourse/discourse · GitHub

Please give it a try and let me know if it fixes your issues, @vincefrommtl.

[vincefrommtl]

This worked perfectly, thank you very much