--header-offset работает медленно в Safari при использовании липких элементов (iPadOS 15.6)

Элементы с фиксированным позиционированием (CSS position: sticky) в Discourse всегда работали с некоторыми проблемами на моём iPad (9-го поколения, полностью обновлённый). Они слегка дрожали при прокрутке, плохо реагировали на резкое изменение направления прокрутки и с задержкой.

С появлением новой боковой панели (которая также является элементом с фиксированным позиционированием) ситуация стала ещё заметнее, поскольку это значительная часть интерфейса, которая не отличается стабильностью.

Виновником является переменная --header-offset. Удаление этой переменной в CSS делает элементы с фиксированным позиционированием стабильными, как и должно быть.

Высота заголовка по умолчанию составляет 4em. Я заменил переменную --header-offset в CSS для Timeline, Sticky-avatar и боковой панели на 4em для расчёта их позиции:

.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 добавлен, потому что у моего заголовка есть рамка, это не связано с проблемой).

Меня интересует функция этой переменной: насколько мне известно, высота заголовка никогда не меняется, кроме случаев изменения размера текста, а использование em для его высоты уже учитывает это.

Не знаю, можно ли оптимизировать --header-offset в Safari на мобильных устройствах, но мой обходной путь решает эту небольшую проблему производительности. Discourse выглядит гораздо более отполированным, когда элементы с фиксированным позиционированием действительно «прилипают» :slight_smile:

(У меня нет никаких проблем с этими элементами в Firefox или Chrome на моём десктопе, так что это может быть баг Safari).

1 лайк

Это обычно связано с пользовательскими темами, но, как вы отметили, существуют и другие случаи, например изменение размера шрифта, которые могут влиять на высоту заголовка. В ситуациях, когда заголовок выше или ниже стандартного, мы вычисляем смещение заголовка (header-offset) в JS, чтобы скорректировать другие элементы на странице, чтобы они не оказывались под заголовком.

В любом случае, я вижу проблему, это действительно раздражает:

но если я установлю --header-offset на статическое значение в CSS:

Возможно, мы вычисляем и обновляем смещение слишком часто? Мы проведём расследование… Safari на iOS выполняет много оптимизаций, которые могут вызывать проблемы.

4 лайка

Я только что добавил исправление для этого: FIX: Calculate header offset once on load by pmusaraj · Pull Request #18669 · discourse/discourse · GitHub

Пожалуйста, проверьте и дайте знать, если это решит ваши проблемы, @vincefrommtl.

7 лайков

Это сработало идеально, большое спасибо :slight_smile:

2 лайка

Эта тема была автоматически закрыта через 4 дня. Новые ответы больше не принимаются.