Элементы с фиксированным позиционированием (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 выглядит гораздо более отполированным, когда элементы с фиксированным позиционированием действительно «прилипают» ![]()
(У меня нет никаких проблем с этими элементами в Firefox или Chrome на моём десктопе, так что это может быть баг Safari).