こんにちは、皆さん。
CSS のことでお手伝いが必要です。サイト内の画像をクリックすると、.d-header が約 2px ずれてしまいます。できるだけ修正を試みましたが、うまくいきませんでした。画像の背後にあるグレーアウト部分の CSS をどのように修正すればよいのか分かりません。
以下のリンクで画像をクリックして、問題を確認してください：
https://engineersasylum.com/t/installing-esp8266-wifi-module-board-in-arduino-ide/436
興味深いですね。これにはこれまで気づいていませんでしたが、ヘッダーが固定され、スクロールバーが非表示になっている限り、Discourse の公式テーマのほとんど（すべて？）でも同様の現象が見られます。
もしかして最近の issue でしょうか？
いいえ、それはもう何年も何年も前からそうです。テスト用に v1.6 が手元にありますが、そこでも同じ現象が起きています。
残念です。
@Pravi ありがとうと言えませんね。今では、長年脳が見過ごしてきた問題が頭から離れなくなっちゃいました😄
ブラウザのスクロールバーがライトボックスが開いたときに消えてしまうのが原因だと思います。
私も同じです 
これに対処するための簡単な方法はありませんか、@awesomerobot？これはヘッダーにのみ影響し、本文には影響していないようです 
それは、スクロールバーが消え、かつ body に docked クラスが付与されているときに現れるようです（これはヘッダーが固定されている場合とは少し異なります）。
信じられません、これだけの年月を経て私が唯一それに気づいたなんて 
。カテゴリを「サポート」から「バグ」に変更しました。
この問題は、スクロールバーが消えたときに、スクロールバーの幅を補うために body に style="margin-right: 17px; overflow: hidden;" が適用されることに起因していると思います。
しかし、.d-header は fixed 位置指定であるため、html の margin-right を「継承」しません。
追記:
html のマージン（スクロールバーの幅に相当）は、jquery.magnific-popup.min.js を介した JavaScript によって計算されているようです。
これを迅速かつクリーンに解決する方法があるかどうかは確信が持てません。
あなたが他のことでイライラしたいなら、コンポーザーも同じことが起こります 
問題は、fixed 要素がビューポート幅に対して配置され、スクロールバーがビューポート幅を変更することです。
@Canapin が指摘しているように、これは <HTML> に対して余分なマージンを追加することで補正されています（Magnific Popup の挙動のようです）。fixed 要素は <HTML> に対して相対的ではないため、コンポーザーとヘッダーには追加の修正が必要です。
必要なことは、スクロールバーの幅を取得し、ポップアップがアクティブ化されたときに、以下のようなインラインスタイルを追加することです。
.d-header {
left: -15px; /* この例では幅 15px のスクロールバー */
width: calc(100% + 30px); /* シフトと幅を補正するためにスクロールバー幅の 2 倍を追加 */
}
これを実装するのは少し私の能力を超えています… スクロールバーの幅はおそらく、ポップアップの前後でページの幅を比較することで計算されるのでしょう。100% 確信はありません。
とは言っても… 今年 IE11 のサポートを終了して position: sticky に移行すれば、この問題は少しは軽減されるでしょう。シフトは発生しなくなりますが、スクロールバーがあった場所のヘッダー右側に隙間ができる可能性があります。
その件が確実に実行されるよう、ブックマークのリマインダーを設定できますか？sticky のサポートのことですよ 
この不具合はいつ修正されるのですか？
少し修正しました。完璧ではありません。タイトル、カテゴリ、ヘッダーのアイコンにまだ動きがありますが、ヘッダーバーは固定されます。
デスクトップ用 CSS
@media screen and (min-width: 1144px) {
.mfp-zoom-out-cur .d-header > .wrap {
transform: translateX(-8px);
}
}
これは完全にはテストしておらず、公式なものでもありませんが、とりあえず試してみてください。より良い解決策を思いつくほど経験が豊富ではないためです。
元の投稿で報告された問題は、ヘッダーに position: sticky; を適用したことで、もはや発生しなくなりました。