Category & tag breadcrumbs dropdown positioning issue

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 !

1 Like

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)


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

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.