Problem mit klebrigen Avataren

Unterstützung
1

Wir haben ein benutzerdefiniertes Theme, und der Header schrumpft, wenn wir scrollen. Wir glauben, dass die kürzlich integrierte Funktion für Sticky Avatars ein „Thrashing“-Verhalten verursacht, gerade wenn der Header schrumpft. Siehe angehängtes Video:

Ich habe versucht, die Sticky Avatars mit dem CSS zu deaktivieren, das ich unter https://meta.discourse.org/t/sticky-avatars-posts-avatars-following-scroll gefunden habe:

.topic-post.sticky-avatar {
    .topic-avatar {
        position: relative !important;
        top: unset !important; /* Kann in einigen Fällen benötigt werden */
    }
}

Das versteckt den Sticky Avatar, scheint aber beim „Thrashing“ nicht zu helfen. Gibt es etwas anderes, das ich tun sollte, um dies zum Laufen zu bringen oder die Funktion vollständig zu deaktivieren?

Ich bin mir nicht zu 100 % sicher, ob es sich um die Sticky Avatars-Änderung handelt – bitte kommentieren Sie, wenn Sie glauben, dass es etwas anderes sein könnte.

Ein Reproduktionsfall ist unter Google launches Chromebook self-repair programme for schools - Right to repair: policy & activism - The Restarters Community zu finden. Chrome eignet sich am besten zur Reproduktion – Firefox scheint den Fehler nach dem ersten Auftreten zu unterdrücken.

2

Ich glaube, das Problem hat nichts mit „sticky avatars“ zu tun.

Wenn sich die Kopfzeile verkleinert, wird die Seite kürzer und die Scroll-Position der Seite ändert sich. Was also passiert, ist, dass Sie dieses Flimmern bekommen, wenn die Seite aus der Position herausspringt, in der sich die Kopfzeile verkleinern sollte.

Wenn ich die Scroll-Position der Seite in meiner Browserkonsole ausgeben lasse, können Sie dies in Aktion sehen… die Kopfzeile verkleinert sich um etwa 60 Pixel, und das spiegelt sich in der Scroll-Position wider, während sie flackert:

Screen Shot 2022-02-21 at 10.59.45 AM
Screen Shot 2022-02-21 at 10.59.45 AM498×532 11.6 KB

Um dies in JS zu lösen, könnten Sie wahrscheinlich die Höhendifferenz zur Scroll-Position addieren, zur gleichen Zeit, in der der Kopfzeilenübergang stattfindet?

Eine andere Möglichkeit, dies nur mit CSS zu beheben, wäre:

.d-header-wrap {
  // dies macht die Kopfzeilenposition fest, sodass sie nicht Teil der Seitenhöhe ist
  position: fixed;
  width: 100%;
}

#main-outlet {
  // dies versetzt den Seiteninhalt um die Höhe der großen Kopfzeile
  // notwendig, da die feste Position die Kopfzeile über den Inhalt legt
  padding-top: 150px !important;
}
3

Vielen Dank, dieses CSS behebt das Problem tatsächlich. Sehr freundlich.