고정 아바타 문제

지원
1

우리는 커스텀 테마를 사용하고 있으며, 스크롤 시 헤더가 축소됩니다. 최근 통합된 스티키 아바타(sticky avatars) 기능이 헤더가 축소되는 시점에 일부 버벅임(thrashing) 현상을 유발한다고 생각합니다. 첨부된 영상을 확인해 주세요:

https://i.gyazo.com/a6a5f7edfd79a1ee7fb6cab003bf63e5.mp4

https://meta.discourse.org/t/sticky-avatars-posts-avatars-following-scroll 에서 찾은 CSS를 사용하여 스티키 아바타를 비활성화해 보았습니다:

.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

이 문제는 스티키 아바타와 무관하다고 생각합니다.

헤더가 축소되면 페이지 높이가 줄어들고, 페이지의 스크롤 위치가 변경됩니다. 그 결과 헤더가 축소되어야 하는 위치에서 페이지가 왔다 갔다 하면서 깜빡임 현상이 발생합니다.

페이지의 스크롤 위치를 브라우저 콘솔에 출력하면 이 현상을 직접 확인할 수 있습니다… 헤더가 약 60px 축소되고, 이것이 깜빡임으로 인해 스크롤 위치에 반영됩니다:

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가 실제로 문제를 해결해 주었습니다. 정말 감사드립니다.