여러분, 안녕하세요.
CSS 관련해서 도움이 필요합니다. 제 사이트에서 어떤 이미지를 클릭하든 .d-header가 약 2px만큼 이동합니다. 최선을 다해 수정하려고 했지만 실패했습니다. 이미지 뒤에 흐리게 표시된 부분의 CSS를 어떻게 수정해야 할지 모르겠습니다.
아래 링크에서 이미지를 클릭하면 문제를 확인할 수 있습니다:
https://engineersasylum.com/t/installing-esp8266-wifi-module-board-in-arduino-ide/436
흥미롭네요.我以前은 이걸 알아채지 못했는데, 헤더가 고정되어 있고 스크롤바가 사라지면 대부분의 (혹은 모든) Discourse 공식 테마에서도 같은 문제가 나타나는 것 같습니다.
최근에 생긴 문제일까요?
아니요, 아주 오래전부터 그랬습니다. 테스트용으로 v1.6 버전을 하나 가지고 있는데, 그 버전에서도 같은 문제가 발생합니다.
아니, 진짜.
@Pravi 고맙다는 말 대신, 이제 내 뇌가 그동안 무시해온 문제를 눈앞에서 지울 수가 없게 됐네요 
라이트박스가 열리면 브라우저의 스크롤바가 사라지기 때문일 것 같아요.
저도 마찬가지입니다 
@awesomerobot 이 문제를 막기 위해 쉽게 할 수 있는 게 있을까요? 헤더에만 영향을 주고 본문에는 영향을 주지 않는 것 같습니다 
스크롤바가 사라지고 AND body에 docked 클래스가 있을 때 나타나는 것 같습니다 (헤더가 sticky일 때와는 약간 다릅니다).
믿을 수 없어요. 이렇게 오랜 시간이 지나고 나서도 저 혼자만 알아챈 건가요? 
카테고리를 지원에서 버그로 변경했습니다.
스크롤바가 사라질 때 스크롤바 너비를 보정하기 위해 body에 style="margin-right: 17px; overflow: hidden;가 적용된다는 것이 문제의 원인이라고 생각합니다.
하지만 .d-header는 fixed 위치를 사용하고 있어 html의 margin-right를 "상속"하지 않습니다.
수정:
html의 margin(스크롤바 너비와 동일)은 jquery.magnific-popup.min.js를 통해 자바스크립트로 계산되는 것 같습니다.
이를 수정할 빠르고 깔끔한 해결책이 있는지 확신하지 못하겠습니다.
composer 쪽에서도 다른 걸로 불평하고 싶으면 이 문제가 생길 수 있어요 
문제는 fixed 요소가 뷰포트 폭에 상대적으로 위치하며, 스크롤바가 뷰포트 폭을 변경한다는 점입니다.
@Canapin 님이 언급했듯이, 이는 <HTML>에서 추가 마진으로 보정됩니다(마그니피센트 팝업 동작처럼 보이네요?). fixed 요소는 <HTML>에 상대적이지 않으므로 composer와 헤더에는 추가적인 수정이 필요합니다.
해야 할 일은 스크롤바의 폭을 계산한 뒤, 팝업이 활성화될 때 다음과 같은 인라인 스타일을 추가하는 것입니다:
.d-header {
left: -15px; /* 이 예시에서 스크롤바 폭은 15px */
width: calc(100% + 30px); /* 이동 및 폭 보정을 위해 스크롤바 폭의 2배를 추가 */
}
이를 구현하는 것은 제 능력 범위 밖입니다… 스크롤바 폭은 팝업 전후 페이지 폭을 비교하여 계산되는 것 같습니다. 100% 확신은 없습니다.
그럼에도 불구하고… 올해 IE11 지원을 중단한 후 position: sticky로 전환하면 이 문제가 약간 줄어들 것입니다. 이동 현상은 더 이상 발생하지 않겠지만, 헤더 오른쪽에 스크롤바가 있던 위치에 간격이 생길 수 있습니다.
그 일이 꼭 일어나는지 확인하기 위해 북마크 알림을 설정할 수 있을까요? sticky 지원에 대해 말이에요 
이건 언제 고쳐질 거야?
작은 수정 사항을 하나 알려드릴게요. 완벽하지는 않고, 제목, 카테고리, 헤더 아이콘에 여전히 움직임이 있지만, 헤더 바는 제자리에 머물러 있을 거예요.
데스크톱용 CSS
@media screen and (min-width: 1144px) {
.mfp-zoom-out-cur .d-header > .wrap {
transform: translateX(-8px);
}
}
이것을 제대로 테스트해 보지는 않았고, 공식적인 해결책도 아니지만, 일단 시도해 볼 수 있어요. 더 나은 해결책을 바로 떠올릴 만큼 숙련되지는 않았거든요.
헤더에 position:sticky;를 적용했기 때문에 OP의 문제는 더 이상 발생하지 않습니다. 