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

[awesomerobot (Kris)]

حسنًا، الأمر أكثر تعقيدًا بعض الشيء… عندما يُطبَّق 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;
}