¡Hola amigos,
Necesito ayuda con CSS. Cada vez que hago clic en cualquier imagen de mi sitio, el .d-header se desplaza unos 2px. Hice todo lo posible para solucionarlo, pero no lo logré. No sé cómo arreglar el CSS de la parte en gris detrás de la imagen.
Haz clic en una imagen en el siguiente enlace para ver el problema:
https://engineersasylum.com/t/installing-esp8266-wifi-module-board-in-arduino-ide/436
Interesante. Nunca lo había notado, pero también aparece en la mayoría (si no en todos) los temas oficiales de Discourse siempre que el encabezado esté fijo y la barra de desplazamiento desaparezca.
¿Quizás sea un problema reciente?
No, ha sido así durante muchos, muchos años. Tengo una v1.6 por ahí para pruebas y también ocurre en ella.
Qué pena.
@Pravi, no te agradezco nada; ahora no puedo dejar de ver el problema que mi cerebro ignoró durante todos estos años 
Creo que podría ser porque la barra de desplazamiento del navegador desaparece cuando se abre el lightbox.
Lo mismo aquí 
¿Hay algo sencillo que podamos hacer para evitar esto @awesomerobot? Parece que solo afecta al encabezado, no al cuerpo principal 
Parece aparecer cuando desaparece la barra de desplazamiento Y el cuerpo tiene la clase docked (lo cual es un poco diferente a cuando el encabezado es fijo).
¡No puedo creer que sea el único que lo haya notado después de todos estos años 
. He cambiado la categoría de soporte a error.
Creo que el problema surge porque, cuando desaparece la barra de desplazamiento, se aplica style="margin-right: 17px; overflow: hidden;" al body para compensar el ancho de la barra. Pero .d-header, al estar en posición fixed, no “hereda” el margin-right del html.
edición:
Parece que el margen del html (igual al ancho de la barra de desplazamiento) se calcula mediante JavaScript a través de jquery.magnific-popup.min.js.
No estoy seguro de que exista una solución rápida y limpia para arreglar esto.
Le pasa al compositor también si quieres algo más de lo que quejarte 
El problema es que los elementos fixed se posicionan en relación con el ancho de la ventana de visualización (viewport), y las barras de desplazamiento modifican ese ancho.
Como menciona @Canapin, esto se compensa en <HTML> con un margen extra (parece el comportamiento de magnific popup)… dado que los elementos fixed no son relativos a <HTML>, el compositor y el encabezado necesitarían una corrección adicional.
Lo que tendríamos que hacer es obtener el ancho de la barra de desplazamiento y, cuando se active el popup, añadir algunos estilos en línea como:
.d-header {
left: -15px; /* Barra de desplazamiento de 15px de ancho en este ejemplo */
width: calc(100% + 30px); /* Añadir 2 veces el ancho de la barra de desplazamiento para compensar el desplazamiento y el ancho */
}
Implementar esto está un poco fuera de mis capacidades… Creo que el ancho de la barra de desplazamiento probablemente se calcula comparando el ancho de la página antes y después del popup. No estoy 100% seguro.
Dicho todo esto… esto será un poco menos problemático si pasamos a position: sticky después de dejar de dar soporte a IE11 este año. El desplazamiento ya no ocurriría, pero podría haber un hueco a la derecha del encabezado donde solía estar la barra de desplazamiento.
¿Podemos establecer un recordatorio de marcador para asegurarnos de que eso ocurra? Me refiero al soporte de sticky 
¿Cuándo se va a arreglar esto?
Tengo una pequeña solución para ti; no es perfecta, aún hay algo de movimiento en el título, la categoría y los encabezados con iconos, pero la barra de encabezado se mantendrá en su lugar.
En CSS para escritorio
@media screen and (min-width: 1144px) {
.mfp-zoom-out-cur .d-header > .wrap {
transform: translateX(-8px);
}
}
No lo he probado a fondo y no es nada oficial, pero por ahora puedes probarlo. No tengo suficiente experiencia para encontrar una mejor solución al momento.
El problema del OP ya no ocurre porque ahora usamos position:sticky; en el encabezado. 