Problème d'avatars bloqués

Soutien
1

Nous avons un thème personnalisé, et l’en-tête rétrécit lorsque nous faisons défiler. Nous pensons que la fonctionnalité d’avatars collants récemment intégrée provoque un comportement de saccades juste au moment où l’en-tête rétrécit. Voir la vidéo ci-jointe :

J’ai essayé de désactiver les avatars collants en utilisant le CSS trouvé sur https://meta.discourse.org/t/sticky-avatars-posts-avatars-following-scroll :

.topic-post.sticky-avatar {
    .topic-avatar {
        position: relative !important;
        top: unset !important; /* Peut être nécessaire dans certains cas */
    }
}

Cela masque l’avatar collant, mais ne semble pas aider avec les saccades. Y a-t-il autre chose que je devrais faire pour que cela fonctionne, ou pour désactiver complètement la fonctionnalité ?

Je ne suis pas sûr à 100 % qu’il s’agisse du changement d’avatars collants - veuillez donc commenter si vous pensez que cela pourrait être autre chose.

Une reproduction est disponible sur Google launches Chromebook self-repair programme for schools - Right to repair: policy & activism - The Restarters Community. Chrome est le meilleur pour reproduire - Firefox semble supprimer l’erreur après la première occurrence.

2

Je pense que le problème n’est pas lié aux avatars “collants”.

Lorsque l’en-tête rétrécit, la page devient plus courte et la position de défilement de la page change. Ce qui se passe, c’est que vous obtenez ce scintillement car la page entre et sort de la position où l’en-tête devrait rétrécir.

Si j’affiche la position de défilement de la page dans ma console de navigateur, vous pouvez le voir en action… l’en-tête rétrécit d’environ 60 px, et cela se reflète dans la position de défilement car elle scintille :

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

Pour résoudre cela en JS, je pense que vous pourriez probablement ajouter la différence de hauteur à la position de défilement en même temps que la transition de l’en-tête se produit ?

Une autre façon de résoudre ce problème en utilisant uniquement CSS serait de :

.d-header-wrap {
  // cela rend la position de l'en-tête fixe, donc elle ne fait pas partie de la hauteur de la page
  position: fixed;
  width: 100%;
}

#main-outlet {
  // cela décale le contenu de la page de la hauteur de l'en-tête large
  // nécessaire car la position fixe place l'en-tête au-dessus du contenu
  padding-top: 150px !important;
}
3

Merci beaucoup, ce CSS le corrige effectivement. C’est très gentil.