Discourse에서 접착 요소(CSS position: sticky)는 제 iPad(9세대, 최신 상태 유지)에서 항상 약간 버벅거렸습니다. 스크롤링 시 미세하게 떨리고, 스크롤 방향이 갑자기 바뀌면 지연되며 반응이 좋지 않았습니다.
새로운 사이드바(이것도 접착 요소입니다)가 도입되면서 문제가 더 두드러졌습니다. UI의 상당 부분을 차지하는 요소인데 안정성이 떨어지기 때문입니다.
그 원인은 --header-offset 변수입니다. CSS에서 이 변수를 제거하면 UI의 접착 요소들이 안정적으로 동작하며, 그래야 할 대로 동작합니다.
헤더의 높이는 기본적으로 4em입니다. Timeline, Sticky-avatar, 사이드바의 위치를 계산하기 위해 CSS에서 --header-offset 변수를 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은 제 헤더에 테두리가 있어서 넣은 것이며, 다른 것과 무관합니다)
이 변수의 기능에 대해 궁금합니다. AFAIK(제가 아는 한) 헤더 높이는 텍스트 크기 변경을 제외하고는 절대 변하지 않으며, 높이에 em을 사용하면 그 문제도 해결됩니다.
Safari 모바일에서 --header-offset를 최적화하는 방법이 있는지 모르겠지만, 제 우회 방법은 이 작은 성능 문제를 해결합니다. 접착 요소가 정말로 접착적으로 동작할 때 Discourse는 훨씬 더 정교해 보입니다 
(데스크톱의 Firefox나 Chrome에서는 이 요소들에 문제가 전혀 없으므로, Safari 버그일 수 있습니다)