مشكلة تحديد موضع القائمة المنسدلة لتتبع الفئات والعلامات

[Decrypt]

مرحباً! أحاول إنشاء سمة مخصصة، لذا قمت بعمل نسخة من “سمة الهواء” وأجريت بعض التعديلات، لكنني لاحظت أن قائمة القائمة المنسدلة للفئات والعلامات كانت موضوعة بطريقة غريبة.

هل تعرف ما الذي يمكن أن يسبب هذا؟ لم أقم بتغيير أي شيء متعلق بـ JS في السمة الخاصة بي، لقد غيرت CSS فقط. يمكنك التحقق من الكود الخاص بي هنا: GitHub - Decryptu/discourse-decrypt: A modern theme with a dark mode option.

يجب أن يكون السبب من السمة الخاصة بي، لأنه عندما أختار “سمة الهواء” الافتراضية، تكون القائمة المنسدلة في المكان الصحيح. لم أقم أيضًا بتغيير خصائص “transform” أو “inset”.

آمل أن يتمكن شخص ما من المساعدة، شكراً لك!

[awesomerobot (Kris)]

هذا أمر غير متوقع بعض الشيء، ولكن يبدو أن الموضع يتأثر بـ

html body #main-outlet {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

إزالة هذه الأسطر تصلح المشكلة بالنسبة لي.

يبدو أن backdrop-filter ينشئ سياق كتلة جديد في CSS، إليك المزيد من المعلومات هنا… https://stackoverflow.com/a/52937920/1869753

هذا يعني أن عنصر position:fixed الخاص بك سيتم وضعه نسبيًا بالنسبة للحاوية المفلترة وليس بالنسبة لعرض المنفذ بعد الآن. بعبارة أخرى، لا يزال ثابتًا ولكنه داخل كتلته الحاوية الجديدة (الحاوية المفلترة)

[Decrypt]

أوه رائع، شكراً لك على هذا الاكتشاف، لم أكن لأفكر أبداً في إزالة ذلك، سأقوم بإزالتها وسأحاول إيجاد بديل لتعتيم الخلفية، شكراً جزيلاً لك.