سؤال متابعة: نفس غياب الشفافية/الضبابية المرئية يظهر الآن أيضًا في عنصر آخر يتشارك مسار تنسيق .menu-panel — وهو حقل إدخال قائمة البحث المنسدلة في الترويسة (.search-input-wrapper، وهو جزء من قائمة البحث Glimmer).
الوصفة (نفس النمط المطابق لتطبيق .d-header الذي يعمل، ولـ .menu-panel المذكور أعلاه):
.search-menu .search-input-wrapper {
background: color-mix(in srgb, var(--header_background) 85%, transparent) !important;
-webkit-backdrop-filter: blur(6px) saturate(1.2);
backdrop-filter: blur(6px) saturate(1.2);
border-radius: 14px;
box-shadow: 0 0 0 1px var(--primary-low-mid);
overflow: hidden;
}
.search-menu .search-input {
background: transparent !important;
}
ما يُعرض بشكل صحيح: كلا من الحد الرفيع (box-shadow) وborder-radius يظهران تمامًا كما هو متوقع — مما يعني أن المحدد (selector) يطابق العنصر الصحيح وأن القاعدة تُطبَّق، ولا يتم تجاوزها بصمت.
ما لا يُعرض: لا توجد شفافية مرئية ولا ضبابية مرئية لما يوجد خلف الحقل، وهو نفس العَرَض الذي تم الإبلاغ عنه سابقًا لـ .menu-panel (لوحة الشريط الجانبي/قائمة البرغر). في حين أن .d-header، باستخدام نفس الأسطر الثلاثة الحرفية (background-color عبر color-mix، و-webkit-backdrop-filter، وbackdrop-filter)، يستمر في العمل بشكل سليم.
هذا يجعلني أشك بشكل متزايد في أن المشكلة ليست خاصة بـ .menu-panel بحد ذاته، بل بشيء مشترك بين هذه العناصر المنسدلة/الطباقية (سياق التراص (stacking context) الذي يُنشأ في مكان آخر من النواة، أو طبقة تركيب (compositing layer) ليست كتلة حاوية مناسبة لـ backdrop-filter، أو ما شابه) — وليس لأي شيء يتعلق بمحدداتنا الخاصة أو قيم الخصائص، بالنظر إلى أن نفس خصائص CSS الثلاثة تتصرف بشكل مختلف اعتمادًا على العنصر الأساسي الذي تُربط به.
هل واجه أي شخص مشكلة في عدم عرض backdrop-filter/الخلفية الشفافة تحديدًا على قائمة البحث المنسدلة أو على طبقات عائلة .menu-panel الأخرى، رغم أن نفس الوصفة تعمل على الترويسة؟