Category & tag breadcrumbs dropdown positioning issue

Development

AI-generated summary

In a discussion about a dropdown positioning issue in a custom Discourse theme, Decrypt reported that the category and tag breadcrumbs dropdown appeared misaligned after forking the “air theme” and modifying only CSS. Despite not altering JavaScript or positioning properties like transform or inset, the issue persisted. awesomerobot identified the culprit as the CSS backdrop-filter: blur(8px) applied to #main-outlet, which creates a new containing block for position: fixed elements — causing the dropdown to position relative to the filtered container instead of the viewport. Removing the backdrop-filter resolved the issue. Decrypt expressed gratitude and plans to find an alternative to achieve the background blur effect without breaking dropdown positioning. The issue is specific to the custom theme and does not occur with the default “air theme”.

1

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.

Capture d’écran 2023-07-25 à 16.55.35
Capture d’écran 2023-07-25 à 16.55.351920×1200 178 KB

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. · GitHub

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 !

2

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… https://stackoverflow.com/a/52937920/1869753

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)

3

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