Проблема с липкими аватарами

Поддержка
1

У нас есть пользовательская тема, и при прокрутке заголовок уменьшается. Мы полагаем, что недавно интегрированная функция «липких» аватаров вызывает проблемы с перерисовкой (thrashing) именно в момент уменьшения заголовка. См. прикрепленное видео:

Я попытался отключить липкие аватары с помощью CSS, который нашёл на https://meta.discourse.org/t/sticky-avatars-posts-avatars-following-scroll:

.topic-post.sticky-avatar {
    .topic-avatar {
        position: relative !important;
        top: unset !important; /* Возможно, потребуется в некоторых случаях */
    }
}

Это скрывает липкий аватар, но, похоже, не решает проблему с перерисовкой. Есть ли что-то ещё, что я должен сделать, чтобы это работало, или полностью отключить функцию?

Я не на 100% уверен, что проблема именно в изменении липких аватаров, поэтому, пожалуйста, прокомментируйте, если вы считаете, что дело может быть в чём-то другом.

Пример воспроизведения доступен по адресу Google launches Chromebook self-repair programme for schools - Right to repair: policy & activism - The Restarters Community. Лучше всего воспроизвести проблему в Chrome — в Firefox ошибка, кажется, подавляется после первого появления.

2

Я думаю, что проблема не связана с «липкими» аватарами.

Когда заголовок уменьшается, страница становится короче, и положение прокрутки страницы меняется. В результате возникает мерцание, поскольку страница прыгает туда-сюда в позицию, где заголовок должен уменьшаться.

Если выведу положение прокрутки страницы в консоль браузера, вы увидите это в действии… заголовок уменьшается примерно на 60 пикселей, и это отражается в положении прокрутки во время мерцания:

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

Чтобы решить это в JS, я думаю, можно добавить разницу высот к положению прокрутки в тот же момент, когда происходит переход заголовка.

Другой способ исправить это только с помощью CSS:

.d-header-wrap {
  // это делает позицию заголовка фиксированной, поэтому он не входит в высоту страницы
  position: fixed;
  width: 100%;
}

#main-outlet {
  // это сдвигает содержимое страницы на высоту большого заголовка
  // необходимо, так как фиксированная позиция помещает заголовок поверх содержимого
  padding-top: 150px !important; 
}
3

Большое спасибо, этот CSS действительно исправляет проблему. Очень любезно с вашей стороны.