Kategorie- und Tag-Breadcrumbs-Dropdown-Positionierungsproblem

[Decrypt]

Hallo! Ich versuche, ein benutzerdefiniertes Theme zu erstellen, also habe ich das „Air Theme“ geforkt und einige Änderungen vorgenommen, aber ich habe bemerkt, dass das Dropdown-Menü für Kategorien und Tags auf seltsame Weise positioniert war.

Weißt du, was das verursachen könnte? Ich habe nichts an JS in meinem Theme geändert, nur CSS. Du kannst meinen Code hier überprüfen: GitHub - Decryptu/discourse-decrypt: A modern theme with a dark mode option.

Es muss von meinem Theme kommen, denn wenn ich das Standard-„Air Theme“ auswähle, ist das Dropdown-Menü an der richtigen Stelle. Ich habe auch die Eigenschaften „transform“ oder „inset“ nicht geändert.

Ich hoffe, jemand kann mir helfen, danke!

[awesomerobot (Kris)]

Das ist eine etwas unerwartete Sache, aber es scheint, dass die Positionierung durch Folgendes beeinflusst wird:

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

Wenn ich diese Zeilen entferne, funktioniert es für mich.

Anscheinend erstellt backdrop-filter einen neuen Blockkontext in CSS, weitere Informationen hier… https://stackoverflow.com/a/52937920/1869753

Das bedeutet, dass Ihr position:fixed-Element relativ zum gefilterten Container und nicht mehr zum Viewport positioniert wird. Mit anderen Worten, es ist immer noch fixiert, aber innerhalb seines neuen enthaltenden Blocks (des gefilterten Containers).

[Decrypt]

Oh wow, danke für den Hinweis, ich wäre nie auf die Idee gekommen, das zu entfernen. Ich werde sie entfernen und versuchen, eine Alternative für den Hintergrundunschärfe zu finden, vielen Dank.