Category & tag breadcrumbs dropdown positioning issue

[Decrypt]

Hello ! I’m trying to create a custom theme, so I forked the “air theme” and did some modifications, but I noticed that the dropdown menu for the categories and tags was positioned in a weird way.

Do you know what could cause this ? I did not changed anything related to JS in my theme, i only changed CSS. You can check my code here : GitHub - Decryptu/discourse-decrypt: A modern theme with a dark mode option.

It must come from my theme, because when I select the default “air theme” the dropdown menu is positioned at the good place. I also did not change the “transform” or “inset” properties.

Hope someone can help me, thank you !

[awesomerobot (Kris)]

This is a little bit of an unexpected one, but it seems that the positioning is impacted by

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

Removing those lines fixes it for me.

Apparently backdrop-filter creates a new block context in CSS, some more info here… css position - Why does applying a CSS-Filter on the parent break the child positioning? - Stack Overflow

This means that your position:fixed element will be positioned relatively to the filtered container and no more the viewport. In other words, it’s still fixed but inside its new containing block (the filtered container)

[Decrypt]

Oh wow, thank you for the finding I would never have thought to remove that, I’ll remove them and try to find an alternative to the background blur, thank you very much