Salut les amis,
J’ai besoin d’aide avec le CSS. Chaque fois que je clique sur une image de mon site, le .d-header se déplace d’environ 2 px. J’ai fait de mon mieux pour corriger le problème, mais sans succès. Je ne sais pas comment modifier le CSS de la zone grisée derrière l’image.
Cliquez sur une image dans le lien ci-dessous pour voir le problème :
https://engineersasylum.com/t/installing-esp8266-wifi-module-board-in-arduino-ide/436
C’est intéressant. Je ne l’avais jamais remarqué, mais cela apparaît également sur la plupart (sinon tous) les thèmes officiels de Discourse tant que l’en-tête est fixé et que la barre de défilement disparaît.
Peut-être s’agit-il d’un problème récent ?
Non, c’est ainsi depuis de nombreuses, nombreuses années. J’ai une version 1.6 sous la main à des fins de test et cela se produit également sur celle-ci.
Dommage.
@Pravi, je ne te remercie pas, maintenant je ne peux plus ignorer le problème que mon cerveau a négligé toutes ces années 
Je pense que cela pourrait être dû au fait que la barre de défilement du navigateur disparaît lorsque la boîte légère est ouverte.
Même chose ici 
Y a-t-il quelque chose de simple que nous pourrions faire pour empêcher cela @awesomerobot ? Cela semble affecter uniquement l’en-tête, et non le corps principal 
Cela semble apparaître lorsque la barre de défilement disparaît ET que le body a la classe docked (ce qui est un peu différent du moment où l’en-tête est fixe).
Je n’arrive pas à croire que je sois le seul à l’avoir remarqué après toutes ces années 
. J’ai changé la catégorie de « support » à « bug ».
Je pense que le problème vient du fait que lorsque la barre de défilement disparaît, style="margin-right: 17px; overflow: hidden; est appliqué sur le body pour compenser la largeur de la barre de défilement. Mais .d-header étant en position fixed, elle n’hérite pas du margin-right du html.
edit :
Il semble que la marge du html (égale à la largeur de la barre de défilement) soit calculée via JavaScript grâce à jquery.magnific-popup.min.js.
Je ne suis pas sûr qu’il existe une solution rapide et propre pour corriger cela.
Ça arrive aussi au compositeur si vous cherchez autre chose à critiquer 
Le problème, c’est que les éléments fixed sont positionnés par rapport à la largeur de la fenêtre d’affichage, et les barres de défilement modifient cette largeur.
Comme le mentionne @Canapin, cela est compensé sur <HTML> par une marge supplémentaire (cela ressemble au comportement de Magnific Popup ?) … comme les éléments fixed ne sont pas relatifs à <HTML>, le compositeur et l’en-tête auraient besoin d’une correction supplémentaire.
Ce qu’il faudrait faire, c’est prendre la largeur de la barre de défilement, puis lorsque la fenêtre contextuelle est activée, ajouter quelques styles en ligne comme :
.d-header {
left: -15px; /* Barre de défilement de 15 px de large dans cet exemple */
width: calc(100% + 30px); /* Ajouter 2x la largeur de la barre de défilement pour compenser le décalage et la largeur */
}
Mettre cela en œuvre me dépasse un peu … Je pense que la largeur de la barre de défilement est probablement calculée en comparant la largeur de la page avant et après l’ouverture de la fenêtre contextuelle ? Pas sûr à 100 %.
Cela étant dit … ce sera un peu moins problématique si nous passons à position: sticky après avoir abandonné le support d’IE11 cette année. Le décalage ne se produirait plus, mais il pourrait y avoir un espace à droite de l’en-tête là où se trouvait la barre de défilement.
Peut-on mettre un rappel de signet pour être certains que cela se produira ? Je parle du support de sticky, bien sûr 
Quand est-ce que ce truc va être réparé ?
J’ai une petite correction pour vous, elle n’est pas parfaite : il reste encore un peu de mouvement sur le titre, la catégorie et les icônes des en-têtes, mais la barre d’en-tête restera en place.
Sur CSS pour ordinateur de bureau
@media screen and (min-width: 1144px) {
.mfp-zoom-out-cur .d-header > .wrap {
transform: translateX(-8px);
}
}
Je n’ai pas testé cela en profondeur et ce n’est absolument pas une solution officielle, mais vous pouvez l’essayer pour l’instant. Je n’ai pas assez d’expérience pour trouver une meilleure solution sur le coup.
Le problème soulevé dans l’OP ne se produit plus car nous utilisons maintenant position:sticky; sur l’en-tête. 