Ciao amici,
h ho bisogno di un aiuto con il CSS. Ogni volta che faccio clic su un’immagine nel mio sito, l’elemento .d-header si sposta di circa 2 pixel. Ho fatto del mio meglio per risolvere il problema, ma senza successo. Non so come correggere il CSS della parte grigia dietro l’immagine.
Clicca su un’immagine nel link qui sotto per vedere il problema:
https://engineersasylum.com/t/installing-esp8266-wifi-module-board-in-arduino-ide/436
Interessante. Non me ne sono mai accorto, ma appare anche nella maggior parte (se non in tutti) i temi ufficiali di Discourse, purché l’intestazione sia fissata e la barra di scorrimento scompaia.
Forse è un problema recente?
No, è così da moltissimi anni. Ho una v1.6 a disposizione per scopi di test e il problema si presenta anche lì.
Che peccato.
@Pravi Non ti ringrazio, ora non riesco più a ignorare il problema che il mio cervello ha trascurato per tutti questi anni 
Penso che possa essere perché la barra di scorrimento del browser scompare quando la lightbox è aperta.
Anche per me 
C’è qualcosa di semplice che potremmo fare per evitare questo @awesomerobot? Sembra che colpisca solo l’intestazione, non il corpo principale 
Sembra che appaia quando la barra di scorrimento scompare E il corpo ha la classe docked (il che è un po’ diverso rispetto a quando l’intestazione è fissa).
Non posso credere di essere l’unico ad averlo notato dopo tutti questi anni 
. Ho cambiato la categoria da supporto a bug.
Penso che il problema sorga dal fatto che, quando la barra di scorrimento scompare, viene applicato style="margin-right: 17px; overflow: hidden;" al body per compensare la larghezza della barra di scorrimento.
Ma dato che .d-header ha una posizione fixed, non “eredita” il margin-right dell’html.
modifica:
Sembra che il margine dell’html (uguale alla larghezza della barra di scorrimento) venga calcolato tramite JavaScript attraverso jquery.magnific-popup.min.js.
Non sono sicuro che esista una soluzione rapida e pulita per risolvere il problema.
Accade anche al compositore se vuoi qualcosa di cui lamentarti 
Il problema è che gli elementi fixed sono posizionati rispetto alla larghezza della viewport, e le barre di scorrimento modificano tale larghezza.
Come menzionato da @Canapin, questo viene compensato su <HTML> con un margine aggiuntivo (sembra un comportamento simile a quello di Magnific Popup)… poiché gli elementi fixed non sono relativi a <HTML>, il compositore e l’intestazione richiederebbero una correzione aggiuntiva.
Ciò che dovremmo fare è calcolare la larghezza della barra di scorrimento e, quando il popup viene attivato, aggiungere alcuni stili inline come:
.d-header {
left: -15px; /* Barra di scorrimento larga 15px in questo esempio */
width: calc(100% + 30px); /* Aggiungere il doppio della larghezza della barra di scorrimento per compensare lo spostamento e la larghezza */
}
Implementare questa soluzione va un po’ oltre le mie capacità… Penso che la larghezza della barra di scorrimento venga calcolata confrontando la larghezza della pagina prima e dopo l’apertura del popup? Non ne sono sicuro al 100%.
Detto questo… questo sarà un problema leggermente minore se passeremo a position: sticky dopo aver eliminato il supporto a IE11 quest’anno. Lo spostamento non si verificherebbe più, ma potrebbe esserci uno spazio vuoto a destra dell’intestazione dove si trovava la barra di scorrimento.
Possiamo impostare un promemoria con segnalibro per essere sicuri che accada? Intendo il supporto per sticky 
Quando sarà riparata questa cosa?
Ho una piccola correzione per te: non è perfetta, c’è ancora un po’ di movimento nel titolo, nella categoria e nelle icone delle intestazioni, ma la barra dell’intestazione rimarrà al suo posto.
CSS per desktop
@media screen and (min-width: 1144px) {
.mfp-zoom-out-cur .d-header > .wrap {
transform: translateX(-8px);
}
}
Non l’ho testata a fondo e non è assolutamente una soluzione ufficiale, ma per ora puoi provarla. Non sono abbastanza esperto da trovare una soluzione migliore al momento.
Il problema segnalato dall’OP non si verifica più perché ora usiamo position:sticky; nell’intestazione. 