مرحبًا يا أصدقاء،
أحتاج إلى بعض المساعدة بخصوص CSS. كلما نقرت على أي صورة في موقعي، يتحرك العنصر .d-header بمقدار 2 بكسل تقريبًا. حاولت جاهداً إصلاح المشكلة لكنني فشلت. لا أعرف كيفية إصلاح تنسيق CSS للجزء الرمادي خلف الصورة.
انقر على صورة في الرابط أدناه لمشاهدة المشكلة:
https://engineersasylum.com/t/installing-esp8266-wifi-module-board-in-arduino-ide/436
مثير للاهتمام. لم ألاحظ هذا من قبل، لكنه يظهر أيضًا في معظم (إن لم يكن جميع) السمة الرسمية لـ Discourse طالما أن الرأس مثبت وشريط التمرير يختفي.
ربما تكون هذه مشكلة حديثة؟
لا، لقد كانت على هذا النحو لسنوات عديدة جدًا. لدي نسخة v1.6 متاحة لأغراض الاختبار، وتحدث المشكلة فيها أيضًا.
يا لها من خيبة أمل.
@Pravi لا أشكرك، فالآن لم أعد أستطيع تجاهل المشكلة التي تجاهلها عقلي طوال هذه السنوات 
أعتقد أن السبب قد يكون اختفاء شريط التمرير في المتصفح عند فتح نافذة العرض المنبثقة.
نفس الأمر هنا 
هل هناك أي إجراء بسيط يمكننا اتخاذه لمنع ذلك يا @awesomerobot؟ يبدو أن هذا يؤثر فقط على الرأس وليس على الجسم الرئيسي 
يبدو أن المشكلة تظهر عندما يختفي شريط التمرير ويكون للـ body الفئة docked (وهو أمر يختلف قليلاً عن حالة تثبيت الرأس في الأعلى).
لا أستطيع أن أصدق أنني الشخص الوحيد الذي لاحظ هذا بعد كل هذه السنوات 
. لقد غيّرت الفئة من الدعم إلى خطأ.
أعتقد أن المشكلة ناتجة عن أنه عند اختفاء شريط التمرير، يتم تطبيق style="margin-right: 17px; overflow: hidden; على عنصر body لتعويض عرض شريط التمرير.
لكن .d-header موضوعة بـ fixed، لذا لا "ترث margin-right من عنصر html.
تعديل:
يبدو أن الهامش الخاص بـ html (المساوي لعرض شريط التمرير) يتم حسابه عبر جافا سكريبت من خلال jquery.magnific-popup.min.js.
لست متأكدًا من وجود حل سريع ونظيف لإصلاح هذه المشكلة.
يحدث ذلك للمُؤلِّف أيضًا إذا أردت شيئًا آخر لتتضايق منه 
المشكلة هي أن العناصر ذات fixed تُوضع نسبةً إلى عرض نافذة العرض، وأشرطة التمرير تُغيّر عرض نافذة العرض.
وكما ذكر @Canapin، يتم تعويض ذلك على عنصر <HTML> عن طريق هامش إضافي (يبدو وكأنه سلوك نافذة منبثقة من Magnific)… وبما أن العناصر الثابتة ليست نسبةً إلى <HTML>، فإن مؤلِّف الرسالة والرأس يحتاجان إلى إصلاح إضافي.
ما نحتاج إلى فعله هو أخذ عرض شريط التمرير، ثم عند تفعيل النافذة المنبثقة، نضيف بعض الأنماط المضمنة مثل:
.d-header {
left: -15px; /* شريط تمرير بعرض 15 بكسل في هذا المثال */
width: calc(100% + 30px); /* إضافة ضعف عرض شريط التمرير للتعويض عن الإزاحة والعرض */
}
تنفيذ هذا الأمر يتجاوز قدراتي قليلاً… أعتقد أن عرض شريط التمرير يُحسب بمقارنة عرض الصفحة قبل وبعد النافذة المنبثقة؟ لست متأكدًا بنسبة 100%.
ومع ذلك، فإن هذا سيكون مشكلة أقل قليلاً إذا انتقلنا إلى position: sticky بعد إسقاط دعم IE11 هذا العام. لن تحدث الإزاحة بعد الآن، لكن قد يكون هناك فجوة على يمين الرأس حيث كان يوجد شريط التمرير سابقًا.
هل يمكننا تعيين تذكير بإشارة مرجعية لنكون متأكدين من حدوث ذلك؟ أقصد دعم sticky، طبعًا 
متى سيتم إصلاح هذا الشيء؟
لديك إصلاح صغير لك، لكنه ليس مثاليًا، فلا يزال هناك بعض الحركة في العنوان والفئة وأيقونات العناوين، لكن شريط الرأس سيظل في مكانه.
على سطح المكتب CSS
@media screen and (min-width: 1144px) {
.mfp-zoom-out-cur .d-header > .wrap {
transform: translateX(-8px);
}
}
لم أجرب هذا بشكل كامل وهو ليس شيئًا رسميًا على الإطلاق، لكن يمكنك تجربته في الوقت الحالي. لست خبيرًا بما يكفي لإيجاد حل أفضل فورًا.
المشكلة المذكورة في المنشور الأصلي لم تعد تحدث لأننا نستخدم الآن position:sticky; في الرأس. 