# \--header-offset가 스티키 요소가 있는 Safari(iPadOS 15.6)에서 느립니다
**URL:** https://meta.discourse.org/t/header-offset-is-slow-on-safari-with-sticky-elements-ipados-15-6/242222
**Category:** Bug
**Tags:** tablet
**Created:** [10월 18, 2022, 3:54오후 UTC](https://meta.discourse.org/t/header-offset-is-slow-on-safari-with-sticky-elements-ipados-15-6/242222 "2022-10-18T15:54:23Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@vincefrommtl](https://meta.discourse.org/u/vincefrommtl)
#### Post date: [10월 18, 2022, 3:54오후 UTC](https://meta.discourse.org/t/header-offset-is-slow-on-safari-with-sticky-elements-ipados-15-6/242222/1 "2022-10-18T15:54:23Z")
Discourse에서 접착 요소(CSS position: sticky)는 제 iPad(9세대, 최신 상태 유지)에서 항상 약간 버벅거렸습니다. 스크롤링 시 미세하게 떨리고, 스크롤 방향이 갑자기 바뀌면 지연되며 반응이 좋지 않았습니다.
새로운 사이드바(이것도 접착 요소입니다)가 도입되면서 문제가 더 두드러졌습니다. UI의 상당 부분을 차지하는 요소인데 안정성이 떨어지기 때문입니다.
그 원인은 --header-offset 변수입니다. CSS에서 이 변수를 제거하면 UI의 접착 요소들이 안정적으로 동작하며, 그래야 할 대로 동작합니다.
헤더의 높이는 기본적으로 4em입니다. Timeline, Sticky-avatar, 사이드바의 위치를 계산하기 위해 CSS에서 --header-offset 변수를 4em으로 대체했습니다:
```plaintext
.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 버그일 수 있습니다)
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [10월 19, 2022, 1:15오전 UTC](https://meta.discourse.org/t/header-offset-is-slow-on-safari-with-sticky-elements-ipados-15-6/242222/3 "2022-10-19T01:15:24Z")
> [@vincefrommtl](#):
>
> 이 변수의 기능에 대해 궁금합니다. AFAIK(제가 아는 한) 헤더의 높이는 텍스트 크기 변경을 제외하고는 절대 변하지 않는 것 같고, 높이에 em 단위를 사용하면 그 문제를 해결할 수 있습니다.
이 문제는 커스텀 테마와 관련이 있는 경우가 많지만, 지적하신 것처럼 헤더 높이에 영향을 줄 수 있는 font-size와 같은 경우도 있습니다. 헤더가 기본값보다 높거나 짧은 경우, JS를 통해 header-offset을 계산하여 헤더 아래로 요소들이 내려가지 않도록 페이지의 다른 요소들을 조정합니다.
어쨌든 문제를 볼 수 있는데, 확실히 눈이 거슬리는 수준입니다:
하지만 CSS에서 `--header-offset`를 정적 값으로 설정하면:
offset을 너무 자주 계산하고 업데이트하는 건가요? 조사를 좀 해보겠습니다… iOS의 Safari는 많은 최적화를 수행하는데, 이것이 문제를 일으키고 있을 수 있습니다.
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [10월 19, 2022, 4:08오후 UTC](https://meta.discourse.org/t/header-offset-is-slow-on-safari-with-sticky-elements-ipados-15-6/242222/8 "2022-10-19T16:08:49Z")
방금 이 문제를 수정하는 패치를 추가했습니다: [FIX: Calculate header offset once on load - Pull Request #18669 - discourse/discourse - GitHub](https://github.com/discourse/discourse/pull/18669)
직접 시도해 보고 문제가 해결되는지 확인 후 알려주세요, @vincefrommtl.
---
### Author:  [@vincefrommtl](https://meta.discourse.org/u/vincefrommtl)
#### Post date: [10월 23, 2022, 2:02오후 UTC](https://meta.discourse.org/t/header-offset-is-slow-on-safari-with-sticky-elements-ipados-15-6/242222/9 "2022-10-23T14:02:45Z")
완벽하게 작동했어요, 정말 감사합니다 🙂
---
### Author:  [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [10월 24, 2022, 11:00오전 UTC](https://meta.discourse.org/t/header-offset-is-slow-on-safari-with-sticky-elements-ipados-15-6/242222/10 "2022-10-24T11:00:26Z")
이 주제는 4일 후 자동으로 닫혔습니다. 더 이상 새로운 답글을 작성할 수 없습니다.