--header-offset ist langsam auf Safari mit Sticky-Elementen (iPadOS 15.6)

[vincefrommtl]

Sticky-Elemente (CSS position: sticky) auf Discourse waren auf meinem iPad (9. Generation, alles aktuell) schon immer etwas hakelig. Sie zitterten beim Scrollen leicht, reagierten schlecht und verzögert auf plötzliche Richtungswechsel beim Scrollen.

Mit der Einführung der neuen Seitenleiste (ebenfalls ein Sticky-Element) wurde es noch schlimmer, da es sich um einen so großen Teil der Benutzeroberfläche handelt, der nicht sehr stabil ist.

Der Übeltäter ist die Variable --header-offset. Das Entfernen dieser Variable in CSS macht die Sticky-Elemente der Benutzeroberfläche stabil, wie es sein sollte.

Die Kopfzeile ist standardmäßig 4em hoch. Ich habe die Variable --header-offset in CSS für die Zeitleiste, den Sticky-Avatar und die Seitenleiste durch 4em ersetzt, um ihre Position zu berechnen:

.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 ist vorhanden, da ich einen Rand an meiner Kopfzeile habe, nicht relevant)

Ich bin neugierig auf die Funktion dieser Variable. Die Kopfzeile ändert ihre Höhe meines Wissens nach nie, außer bei Änderung der Textgröße, und die Verwendung von em für ihre Höhe berücksichtigt dies.

Ich weiß nicht, ob es eine Möglichkeit gibt, --header-offset auf Safari Mobile zu optimieren, aber meine Problemumgehung behebt dieses kleine Leistungsproblem. Discourse sieht viel polierter aus, wenn Sticky-Elemente wirklich sticky sind

(Ich habe keinerlei Probleme mit diesen Elementen auf Firefox oder Chrome auf meinem Desktop, daher könnte es ein Safari-Bug sein)

[awesomerobot (Kris)]

@vincefrommtl

Ich bin neugierig auf die Funktion dieser Variable. Der Header ändert seine Höhe meines Wissens nach nie, außer wenn die Textgröße geändert wird, und die Verwendung von em für seine Höhe kümmert sich darum.

Dies hängt tendenziell mit benutzerdefinierten Themes zusammen, aber wie Sie bereits bemerkt haben, gibt es auch Fälle wie die Schriftgröße, die die Header-Höhe beeinflussen können. In Fällen, in denen der Header höher oder niedriger als der Standardwert ist, berechnen wir den Header-Offset in JS, um andere Elemente auf der Seite anzupassen, damit sie nicht unter dem Header liegen.

Wie auch immer, ich sehe das Problem, das ist definitiv störend:

Aber wenn ich --header-offset in CSS auf einen statischen Wert setze:

Vielleicht berechnen und aktualisieren wir den Offset zu oft? Wir werden das untersuchen… Safari unter iOS führt viele Optimierungen durch, die Probleme verursachen könnten.

[pmusaraj (Penar Musaraj)]

Ich habe gerade eine Korrektur dafür hinzugefügt: FIX: Calculate header offset once on load by pmusaraj · Pull Request #18669 · discourse/discourse · GitHub

Bitte probieren Sie es aus und lassen Sie mich wissen, ob es Ihre Probleme behebt, @vincefrommtl.

[vincefrommtl]

Das hat perfekt funktioniert, vielen Dank