لا يؤثر backdrop-filter (blur) على .menu-panel، على الرغم من أن شفافية الخلفية تعمل

ساهم تجربة المستخدم
1

أقوم بتخصيص قالب مخصص طويل الأمد، وأردت منح قائمة الهامبرغر/الشريط الجانبي (.menu-panel) المظهر الشفاف والمموّه الذي يعمل بالفعل بشكل جيد على .d-header. الشفافية تعمل، لكن التمويه لا يعمل — وأودّ الإشارة إلى هذا كالتغذية الراجعة، لأن بعض الأمور المتعلقة بكيفية تنسيق هذا المكوّن في الأنماط الأساسية جعلت الأمر أصعب مما توقعت.

ما أحاول تحقيقه

لوحة قائمة شبه شفافة مع backdrop-filter: blur() خلفها، بحيث لا يزال بإمكان المحتوى في الصفحة أن يُلمح من خلال اللوحة، مما يشبه مظهر الزجاج المصقول الذي تستخدمه العديد من التطبيقات الأصلية. كلا التأثيرين — الشفافية و التمويه — مهمان لي؛ فالشفافية بدون تمويه تبدو فوضوية فوق قوائم المواضيع المزدحمة.

ما يعمل بالفعل

على .d-header، هذا كل ما يلزم ويعمل بشكل موثوق (تم الاختبار على iOS Safari و Chrome على سطح المكتب):

.d-header {
  background-color: color-mix(in srgb, var(--header_background) 50%, transparent);
  -webkit-backdrop-filter: blur(3px) saturate(1.2);
  backdrop-filter: blur(3px) saturate(1.2);
}

ما لا يعمل

تطبيق نفس الوصفة بالضبط على .menu-panel يمنحني الشفافية، لكن ليس التمويه أبداً، على iOS Safari:

.menu-panel {
  background-color: color-mix(in srgb, var(--secondary) 85%, transparent) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
  backdrop-filter: blur(6px) saturate(1.2);
  border-radius: 14px;
}

أشياء حاولتها لجعل التمويه يظهر، ولم تنفع أي منها:

  • إضافة !important إلى إعلانات backdrop-filter/-webkit-backdrop-filter نفسها.
  • إجبار طبقة تركيب مخصصة باستخدام transform: translateZ(0) مع overflow: hidden (حل شائع لمشاكل أخرى مع backdrop-filter في Safari) — لم يكن لهذا أي فرق هنا، لذا أزلته مرة أخرى بدلاً من الاحتفاظ بحيلة لم تكن تستحق مكانها.
  • تأكدت من أنني أستهدف العنصر الصحيح: وفقاً لـ menu-panel.scss، يتم تعيين الخلفية غير الشفافة مباشرة على .menu-panel (وليس على عنصر فرعي مثل .panel-body)، وهو ما أخطأت في البداية ثم صححته.

إذا كان هناك أي شخص يعرف لماذا يتصرف .menu-panel بشكل مختلف عن .d-header هنا، أو لديه وصفة تعمل، فسأكون سعيداً بسماع ذلك.

المشكلة الثانية: خلفيات صلبة على صفوف القائمة الفردية

حتى مع جعل خلفية اللوحة نفسها شفافة، لا يزال عدة أشياء داخلها تُعرض ككتل صلبة، لأن الأنماط الأساسية تعيّن خلفيتها مباشرة بدلاً من ذلك من خلال خلفية اللوحة نفسها:

  • .user-notifications-list .read و .bookmark — الإشعارات المقروءة والعلامات المرجعية في قائمة المستخدم تحصل على background-color: var(--secondary) مباشرة، لذا يظهر كل صف ككتلة غير شفافة تطفو على اللوحة الشفافة.
  • .hamburger-panel .sidebar-footer-wrapper .sidebar-footer-container — تذييل الملف الشخصي/تسجيل الدخول في أسفل الشريط الجانبي لديه نفس المشكلة.

يمكنني (وقد فعلت بالفعل) تجاوز هذه في قالبتي، لكن هذا يعني البحث عن كل var(--secondary) الصلبة في menu-panel.scss واحدة تلو الأخرى، وسيتكسر الأمر مرة أخرى المرة القادمة التي تضيف فيها الأنماط الأساسية عنصراً جديداً بنفس النمط. سيكون من المفيد جداً لو عادت هذه إلى خاصية CSS مخصصة بدلاً من ذلك، على سبيل المثال شيء ما مثل --d-menu-panel-background بقيمة افتراضية var(--secondary)، بحيث يحتاج القالب إلى إعادة تعريف متغير واحد فقط لجعل اللوحة بأكملها — بما في ذلك صفوفها — شفافة بشكل متسق، بدلاً من مطاردة المحددات الفردية.

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

IMG_1129
IMG_11291290×2373 235 KB

IMG_1130
IMG_1130992×2364 241 KB

إعجاب واحد (1)
Terraglass — a frosted-glass theme with considered light/dark palettes
2

سؤال متابعة: نفس غياب الشفافية/الضبابية المرئية يظهر الآن أيضًا في عنصر آخر يتشارك مسار تنسيق .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 الأخرى، رغم أن نفس الوصفة تعمل على الترويسة؟

3

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

.user-menu .quick-access-panel .read {
  background: transparent;
}

وبالمثل، بالنسبة لحقل البحث، هناك خلفية منفصلة مطبقة هناك والتي يجب إزالتها:

.search-menu .search-input, .search-menu-container .search-input {
  background: transparent;
}

لدينا دليل يشرح كيفية إجراء تغييرات CSS كهذه وقد يكون مفيدًا، Making custom CSS changes on your site

إعجاب واحد (1)
4

شكرًا جزيلاً! — كلا الإصلاحين عملًا تمامًا كما هو موصوف.

لمن يواجه نفس المشكلة: بالإضافة إلى التعديلات (overrides) التي شاركتها، كان لدي أيضًا عنصر .results متداخل داخل .search-menu-panel يرسم خلفية معتمة خاصة به بشكل مستقل عن .menu-panel، مما تطلّب نفس المعالجة:

.search-menu-panel .results {
  background: transparent !important;
}

مع هذا بالإضافة إلى مقتطفيك، تعمل الشفافية الآن بسلاسة في كل مكان — الشريط الجانبي، لوحة القائمة (hamburger)، إشعارات الوصول السريع، وقائمة البحث المنسدلة الكاملة بما في ذلك قائمة النتائج. يبقى النص مقروءًا تمامًا في كل الأجزاء، لذا فإن جانب الشفافية محلول بالكامل لدينا الآن.

الجزء الوحيد المتبقي هو الموضوع الأصلي لهذا الخيط: backdrop-filter/الضبابية (blur) نفسها. حتى مع جعل جميع الخلفيات شفافة بشكل صحيح الآن، لا يظهر أي ضبابية في أي من هذه العناصر — نفس العرض السابق، ولا يزال يتناقض مع .d-header، حيث تعمل نفس وصفة backdrop-filter بشكل جيد. لذا، تم حل جانب الشفافية، لكن جانب الضبابية لا يزال مفتوحًا.

شكرًا مرة أخرى على وقتك في الغوص في هذه المسألة — كان ذلك مفيدًا حقًا.

إعجاب واحد (1)
5

حسنًا، الأمر أكثر تعقيدًا بعض الشيء… عندما يُطبَّق backdrop-filter على عنصر مثل الترويسة (header)، يصبح هذا العنصر الجذر (root) للتأثير. وبالتالي، أي عنصر ناسخ (descendant) مضمّن داخل هذا الجذر (مثل لوحات القائمة المنسدلة) لا يمكنه إلا أن يُضَبِّب المحتوى الموجود داخل هذا الجذر… فهو لا يستطيع رؤية محتوى الصفحة خارج الترويسة، حتى لو امتدت اللوحات خارج حدود الترويسة، لذلك لن يظهر أي تأثير ضبابية في تلك المناطق.

ما يمكنك فعله بدلاً من ذلك هو استخدام عنصر مستعار (pseudo element) على الترويسة لتجاوز هذه القيود المتعلقة بالجذر.

.d-header {
  position: relative;
  isolation: isolate;
  background-color: transparent;

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: color-mix(in srgb, var(--header_background) 70%, transparent);
    backdrop-filter: blur(12px);
    pointer-events: none;
  }
}

.menu-panel {
  background-color: color-mix(in srgb, var(--secondary) 70%, transparent);
  backdrop-filter: blur(12px);
}

.user-menu .quick-access-panel .read {
  background: transparent;
}
إعجاب واحد (1)
6

(تم حذف المنشور بواسطة الكاتب)

إعجاب واحد (1)