Hallo Freunde,
ich brauche Hilfe bei CSS. Immer wenn ich auf ein Bild auf meiner Website klicke, verschiebt sich der .d-header um etwa 2 Pixel. Ich habe mein Bestes gegeben, um das Problem zu beheben, aber leider ohne Erfolg. Ich weiß nicht, wie ich das CSS des ausgegrauten Bereichs hinter dem Bild korrigieren soll.
Klicke auf ein Bild im folgenden Link, um das Problem zu sehen:
https://engineersasylum.com/t/installing-esp8266-wifi-module-board-in-arduino-ide/436
Interessant. Mir ist das noch nie aufgefallen, aber es tritt auch bei den meisten (wenn nicht allen) offiziellen Discourse-Themen auf, solange der Header fixiert ist und die Bildlaufleiste verschwindet.
Vielleicht ist das ein neues Problem?
Nein, das ist schon seit vielen, vielen Jahren so. Ich habe eine v1.6 zur Hand, um es zu testen, und das Problem tritt auch dort auf.
Schade.
@Pravi Ich danke dir nicht, jetzt kann ich das Problem, das mein Gehirn all diese Jahre ignoriert hat, nicht mehr „ungesehen
Ich denke, das könnte daran liegen, dass die Bildlaufleiste des Browsers verschwindet, wenn die Lightbox geöffnet ist.
Bei mir genauso 
Gibt es eine einfache Möglichkeit, das zu verhindern, @awesomerobot? Das scheint nur den Header zu betreffen, nicht den Hauptinhalt 
Es scheint aufzutreten, wenn die Bildlaufleiste verschwindet UND der Body die Klasse docked hat (was etwas anders ist als, wenn der Header fixiert ist).
Ich kann es kaum glauben, dass ich nach all den Jahren der Einzige bin, der es bemerkt hat 
. Ich habe die Kategorie von Support auf Bug geändert.
Ich denke, das Problem liegt darin, dass, wenn die Bildlaufleiste verschwindet, style="margin-right: 17px; overflow: hidden;" auf das body-Element angewendet wird, um die Breite der Bildlaufleiste auszugleichen.
Da .d-header jedoch fixed positioniert ist, “erbt” es den margin-right von html nicht.
Edit:
Es scheint, dass der html-Margin (entspricht der Breite der Bildlaufleiste) über JavaScript durch jquery.magnific-popup.min.js berechnet wird.
Ich bin mir nicht sicher, ob es eine schnelle und saubere Lösung gibt, um dies zu beheben.
Das passiert auch dem Composer, falls du noch etwas anderes finden willst, das dich ärgert 
Das Problem ist, dass fixed-Elemente relativ zur Viewport-Breite positioniert werden und Scrollbänder die Viewport-Breite verändern.
Wie @Canapin erwähnt, wird dies auf <HTML> durch einen zusätzlichen Rand ausgeglichen (sieht nach dem Verhalten von Magnific Popup aus?) … da fixed-Elemente nicht relativ zu <HTML> sind, wären für den Composer und die Kopfzeile zusätzliche Anpassungen erforderlich.
Was wir tun müssten, ist die Breite des Scrollbalkens zu ermitteln und dann, wenn das Popup aktiviert wird, einige Inline-Styles hinzuzufügen wie:
.d-header {
left: -15px; /* 15px breites Scrollband in diesem Beispiel */
width: calc(100% + 30px); /* 2x Scrollbandbreite hinzufügen, um Verschiebung und Breite auszugleichen */
}
Die Umsetzung geht ein wenig über meine Fähigkeiten hinaus … Ich denke, die Scrollbandbreite wird wahrscheinlich durch den Vergleich der Seitenbreite vor und nach dem Popup berechnet? Bin mir nicht zu 100 % sicher.
Trotzdem … dies wird ein wenig weniger problematisch sein, wenn wir nach dem Ende der Unterstützung für IE11 in diesem Jahr auf position: sticky umstellen. Die Verschiebung würde dann nicht mehr auftreten, aber es könnte eine Lücke rechts neben der Kopfzeile entstehen, wo sich früher das Scrollband befand.
Können wir einen Lesezeichen-Erinnerung setzen, damit wir sicher wissen, dass das passiert? Ich meine die sticky-Unterstützung 
Wann wird das Ding endlich behoben?
Ich habe eine kleine Korrektur für euch, sie ist nicht perfekt, es gibt immer noch etwas Bewegung beim Titel, der Kategorie und den Header-Icons, aber die Header-Leiste bleibt an Ort und Stelle.
Für Desktop-CSS:
@media screen and (min-width: 1144px) {
.mfp-zoom-out-cur .d-header > .wrap {
transform: translateX(-8px);
}
}
Ich habe dies nicht umfassend getestet, und es ist überhaupt keine offizielle Lösung, aber ihr könnt es vorerst ausprobieren. Ich bin nicht erfahren genug, um mir spontan eine bessere Lösung einzufallen.
Das Problem im ursprünglichen Beitrag tritt nicht mehr auf, da wir jetzt position:sticky; auf der Kopfzeile verwenden. 