Olá, amigos,
Preciso de ajuda com CSS. Sempre que clico em qualquer imagem no meu site, o .d-header se desloca cerca de 2px. Fiz o meu melhor para corrigir, mas não consegui. Não sei como ajustar o CSS da parte cinza atrás da imagem.
Clique em uma imagem no link abaixo para ver o problema:
https://engineersasylum.com/t/installing-esp8266-wifi-module-board-in-arduino-ide/436
Interessante. Eu nunca havia notado isso, mas isso também aparece na maioria (se não em todos) os temas oficiais do Discourse, desde que o cabeçalho esteja fixo e a barra de rolagem desapareça.
Talvez seja um problema recente?
Não, tem sido assim há muitos, muitos anos. Tenho uma v1.6 por aí para fins de teste e o problema ocorre nela também.
Que pena.
@Pravi, não te agradeço, agora não consigo mais ignorar o problema que meu cérebro ignorou todos esses anos 
Acho que pode ser porque a barra de rolagem do navegador desaparece quando o lightbox está aberto.
Aqui também 
Tem algo simples que poderíamos fazer para evitar isso, @awesomerobot? Parece que afeta apenas o cabeçalho, não o corpo principal 
Parece aparecer quando a barra de rolagem desaparece E o corpo tem a classe docked (o que é um pouco diferente de quando o cabeçalho é fixo).
Não posso acreditar que sou o único que notou isso depois de todos esses anos :rosto_loco:. Mudei a categoria de suporte para bug.
Acho que o problema ocorre porque, quando a barra de rolagem desaparece, style="margin-right: 17px; overflow: hidden;" é aplicado no body para compensar a largura da barra de rolagem. Mas, como .d-header está com posição fixed, ele não “herda” o margin-right do html.
edit:
Parece que a margem do html (igual à largura da barra de rolagem) é calculada via JavaScript por meio de jquery.magnific-popup.min.js.
Não tenho certeza se existe uma solução rápida e limpa para corrigir isso.
Acontece também com o compositor se você quiser algo mais para reclamar 
O problema é que elementos fixed são posicionados em relação à largura da viewport, e as barras de rolagem alteram essa largura.
Como @Canapin menciona, isso é compensado no <HTML> com uma margem extra (parece o comportamento do magnific popup?)… como elementos fixed não são relativos ao <HTML>, o compositor e o cabeçalho precisariam de uma correção adicional.
O que precisaríamos fazer é pegar a largura da barra de rolagem e, quando o popup for ativado, adicionar alguns estilos inline como:
.d-header {
left: -15px; /* barra de rolagem de 15px de largura neste exemplo */
width: calc(100% + 30px); /* adicionar 2x a largura da barra de rolagem para compensar o deslocamento e a largura */
}
Implementar isso está um pouco além das minhas capacidades… Acredito que a largura da barra de rolagem seja calculada comparando a largura da página antes e depois do popup? Não tenho 100% de certeza.
Dito tudo isso… isso será um pouco menos problemático se migrarmos para position: sticky após abandonarmos o suporte ao IE11 este ano. O deslocamento não ocorreria mais, mas pode haver uma lacuna à direita do cabeçalho onde a barra de rolagem costumava estar.
Podemos definir um lembrete de marcador para sabermos com certeza quando isso acontecerá? A questão do suporte ao sticky, digo 
Quando é que isso vai ser consertado?
Tenho um pequeno ajuste para você. Não é perfeito; ainda há algum movimento no título, na categoria e nos ícones dos cabeçalhos, mas a barra do cabeçalho permanecerá no lugar.
No CSS para desktop:
@media screen and (min-width: 1144px) {
.mfp-zoom-out-cur .d-header > .wrap {
transform: translateX(-8px);
}
}
Não testei isso completamente e não é algo oficial de forma alguma, mas por enquanto você pode tentar. Não tenho experiência suficiente para encontrar uma solução melhor imediatamente.
O problema do OP não ocorre mais porque agora usamos position: sticky; no cabeçalho. 