최근 업데이트로 상단 내비게이션 바가 깨졌습니다

최근 업그레이드 이후 상단 내비게이션 바가 깨졌습니다. 좀 더 구체적으로 말하면, 바는 로드되긴 하는데(순간적으로 보이다가) 표준 discourse 헤더가 그 위에 겹쳐지면서 숨겨지는 상태입니다.

정확히 무슨 일이 있었는지, 그리고 어떻게 수정해야 하는지 알아보고 있습니다. 방향을 잡아줄 수 있는 분이 있을까요?

브라우저에서 페이지를 검사해 보니, 다음을 설정하면

.d-header-wrap {
    margin-top: 48px;
}

헤더가 아래로 이동하여 내비게이션 바(높이 48px)가 드러나며, 이렇게 하면 문제가 해결되는 것 같습니다.

하지만 이것이 지속 가능한 해결책인지 확신이 서지 않고, 정확히 무슨 일이 있었는지 여전히 궁금합니다.

또한 헤더 아래에 생겼던 추가적인 여백을 제거하기 위해 컴포넌트에서 다음 코드를 제거해야 했습니다.

#main-outlet { margin-top: 48px; padding-top: 75px;}

이 코드는 수년간 잘 작동해 왔기 때문에 무엇이 문제를 일으켰는지 궁금합니다…

아무런 차이가 없어 보이는 것 같아 다음 코드도 제거했습니다.

#main-outlet.docked {
    margin-top: 0px;
    padding-top: 123px
}

수정: 위 내용은 데스크톱 CSS에 해당합니다. 모바일에서는 내비게이션 바의 Z 값을 높일 필요가 없었습니다.

헤더가 position: fixed에서 position: sticky로 변경되었습니다 (REFACTOR: Remove position fixed from the header and use sticky instea… · discourse/discourse@da5841d · GitHub) - 이는 IE11 지원을 중단할 수 있게 되어 우리가 진행할 수 있게 된 업데이트 중 하나입니다.

이 변경 사항은 Discourse가 존재해 온 동안 헤더에서 겪어 온 몇 가지 사소한 문제를 개선합니다… 기능적으로 말하면, 헤더가 고정된 위치(페이지 내 다른 요소의 위치와 무관한)에 있는 대신 이제 페이지 내 요소들의 자연스러운 흐름의 일부가 되었습니다… 그래서 메인 아웃렛의 패딩과 마진이 더 이상 필요하지 않게 된 것입니다.

변경 사항이 처음 적용되었을 때 기본 CSS에서 모바일에 추가 패딩이 있었지만, 이는 하루 이틀 후에 수정되었습니다… 아마도 초기 변경 사항과 수정 사항 사이의 그 사이에 업데이트를 하셨을 것 같습니다. 다시 업데이트하시면 문제가 해결될 것입니다 (다시 업데이트하고 싶지 않으시면 .mobile-view #main-outlet { padding-top: 0.25em; }을 추가할 수도 있습니다).

.d-header-wrap을 사용한 수정 방법은 지속 가능해 보입니다.

Header Submenus - #103 by Mark_Schmucker 도 참고하세요. 제안된 지속 가능한 수정 사항이 해당 사례에도 적용되는지는 확실하지 않지만, 같은 변경 사항과 관련이 있다고 생각합니다.

오랜 기간 방치하다시피 하던 것을 최신 버전(2.8.0.beta4)으로 갱신했는데, 제 수정이 생각만큼 지속 가능하지 않은 것 같습니다(혹은 현재 문제가 이 수정과 무관할 수도 있겠고요). 현재 무슨 일이 있었는지 파악하기 위해 조사 중이며, 원인을 알게 되면 이곳에 업데이트하겠습니다. 하지만 아래 내용이 누군가에게 해당된다면 알려주시면 감사하겠습니다.

결론적으로, OP(원문)에서 설명한 것과 동일한 상황이 발생했지만, 이번에는 discourse 헤더가 상단 내비게이션 바를 가리는 것이 아니라 상단 내비게이션 바가 discourse 헤더를 가리는 것입니다. (수정: 현재 헤더가 가려지는 것이 아니라 아예 렌더링되지 않는다고 생각합니다.) safe mode를 통해 기본 테마를 비활성화하면 정상적으로 표시됩니다.

그러나 이상하게도, /admin/customize/themes/11/desktop/scss/edit으로 이동하면 safe mode와 일반 모드 모두에서 discourse 헤더와 상단 내비게이션 바가 모두 올바르게 표시됩니다. 테마 페이지에서 safe mode와 일반 모드 사이에 차이가 없는 이유는 safe mode가 일부 관리자 페이지에는 적용되지 않기 때문이라고 생각합니다. 하지만 왜 관리자 페이지에서는 모든 것이 올바르게 표시되는데 다른 곳에서는 그렇지 않은지 이해가 되지 않습니다.

또 하나 이해가 안 되는 점은, 모바일로 사이트에 접속하면 데스크톱 버전을 명시적으로 요청하더라도 역시 정상적으로 표시된다는 것입니다…

더 조사해 보겠지만, 혹시 힌트가 있다면 알려주시면 감사하겠습니다.

수정: 일반 모드에서 공개 페이지를 검사할 때 보이는 모습은 다음과 같습니다:

그리고 일반 모드에서 관리자 페이지를 검사할 때 보이는 모습은 다음과 같습니다:

보시다시피, 제 CSS 수정은 두 경우 모두 존재하지만, 두 번째 경우에서만 페이지가 올바르게 렌더링됩니다…

네, 이제 수정한 것 같습니다. 사라지는 헤더 문제는 제 수정 사항과 관련이 없으며, 이 테마 컴포넌트 때문이었습니다:

이를 제거하니 문제가 해결되었습니다. @Johani 님이 원인을 아실까요? 아마도 아래 기능이 관련이 있을 수도 있습니다:

iframe의 추가 제어

이 기능은 Discourse Version 2.6 - #2 by neil? 에서 도입되었습니다.