starred/homeassistant-visionos-theme

Fork 0

mirror of https://github.com/Nezz/homeassistant-visionos-theme.git synced 2026-05-09 08:25:57 +02:00

[GH-ISSUE #2] Dropdowns are placed incorrectly #1

New issue

Closed

opened 2026-05-07 00:16:58 +02:00 by BreizhHardware · 9 comments

BreizhHardware commented

2026-05-07 00:16:58 +02:00

Owner

Originally created by @Nezz on GitHub (Apr 28, 2024).
Original GitHub issue: https://github.com/Nezz/homeassistant-visionos-theme/issues/2

When a large dropdown is opened, it can end up in the wrong place on the screen.

This happens because this theme uses backdrop-filter. This exposes an issue in Material Design 2 where large menus rely on position: fixed, which behaves differently when a filter is used:

A value other than none for the filter property results in the creation of a containing block for absolute and fixed positioned descendants [...]
https://drafts.fxtf.org/filter-effects/#FilterProperty

Sadly the material web components Home Assistant uses are no longer maintained as development moved on to Material Design 3.

Originally created by @Nezz on GitHub (Apr 28, 2024). Original GitHub issue: https://github.com/Nezz/homeassistant-visionos-theme/issues/2 When a large dropdown is opened, it can end up in the wrong place on the screen. This happens because this theme uses `backdrop-filter`. This exposes an issue in Material Design 2 where large menus rely on `position: fixed`, which behaves differently when a filter is used: >A value other than none for the [filter](https://drafts.fxtf.org/filter-effects/#propdef-filter) property results in the creation of a [containing block](https://drafts.csswg.org/css-display-4/#containing-block) for absolute and fixed positioned descendants [...] >https://drafts.fxtf.org/filter-effects/#FilterProperty Sadly the material web components Home Assistant uses are no longer maintained as development moved on to Material Design 3.

BreizhHardware

2026-05-07 00:16:58 +02:00

closed this issue
added the
bug
label

BreizhHardware referenced this issue

2026-05-07 00:16:59 +02:00

[GH-ISSUE #1] Background scrolls on iOS #3

BreizhHardware commented

2026-05-07 00:16:59 +02:00

Author

Owner

@Nezz commented on GitHub (Jul 10, 2024):

It does not look like this will be fixed anytime soon. Home Assistant uses Material Design 2 components. Material 3 never added support for menus/dropdowns and now Google stopped developing it:
https://github.com/material-components/material-web/discussions/5642

@Nezz commented on GitHub (Jul 10, 2024): It does not look like this will be fixed anytime soon. Home Assistant uses Material Design 2 components. Material 3 never added support for [menus/dropdowns](https://m3.material.io/components/menus/overview) and now Google stopped developing it: https://github.com/material-components/material-web/discussions/5642

BreizhHardware commented

2026-05-07 00:17:00 +02:00

Author

Owner

@Misiu commented on GitHub (Mar 12, 2025):

There is a chance HA will move away from material to Shoelace - https://github.com/home-assistant/frontend/pull/24525#issuecomment-2703969971

@Misiu commented on GitHub (Mar 12, 2025): There is a chance HA will move away from material to [Shoelace](https://shoelace.style/) - https://github.com/home-assistant/frontend/pull/24525#issuecomment-2703969971

BreizhHardware commented

2026-05-07 00:17:00 +02:00

Author

Owner

@morgindale commented on GitHub (Mar 14, 2025):

I'm a bit late to the party, but i like this theme too much to not try to fix this problem. Here's what's working for me.
It's based on card-mod as you can see and it's a proof-of-concept. This adds the backdrop-filter (only) for cards in a way, that it doesnt disturb any dropdowns or something else. In my case it's working fine and i'll apply the same solution for other elements in the theme.

    ha-card:before {
      content: '';
      display: block;
      position: absolute;
      width: calc(100% - 2px);
      height: calc(100% - 2px);
      left: 0;
      top: 0;
      margin: 1px;
      pointer-events: none;
      backdrop-filter: blur(10px);
      inset: 0;
      clip-path: inset(0 round 20px);
      z-index: -1;
    }

@morgindale commented on GitHub (Mar 14, 2025): I'm a bit late to the party, but i like this theme too much to not try to fix this problem. Here's what's working for me. It's based on card-mod as you can see and it's a proof-of-concept. This adds the backdrop-filter (only) for cards in a way, that it doesnt disturb any dropdowns or something else. In my case it's working fine and i'll apply the same solution for other elements in the theme. ``` card-mod-card: | ha-card:before { content: ''; display: block; position: absolute; width: calc(100% - 2px); height: calc(100% - 2px); left: 0; top: 0; margin: 1px; pointer-events: none; backdrop-filter: blur(10px); inset: 0; clip-path: inset(0 round 20px); z-index: -1; } ```

BreizhHardware commented

2026-05-07 00:17:01 +02:00

Author

Owner

@Nezz commented on GitHub (Mar 18, 2025):

In addition to large dropdowns, selects with fixedMenuPosition are problematic:
https://github.com/search?q=repo%3Ahome-assistant%2Ffrontend%20fixedMenuPosition%20&type=code

@Nezz commented on GitHub (Mar 18, 2025): In addition to large dropdowns, selects with `fixedMenuPosition` are problematic: https://github.com/search?q=repo%3Ahome-assistant%2Ffrontend%20fixedMenuPosition%20&type=code

BreizhHardware commented

2026-05-07 00:17:01 +02:00

Author

Owner

@Nezz commented on GitHub (Jun 26, 2025):

The HA team is working on replacing the dropdowns with one that's compatible with the blur effects:
https://www.home-assistant.io/blog/2025/06/11/release-20256/#improving-all-the-pickers

Hopefully it will come to all the different kinds of dropdowns soon.

@Nezz commented on GitHub (Jun 26, 2025): The HA team is working on replacing the dropdowns with one that's compatible with the blur effects: https://www.home-assistant.io/blog/2025/06/11/release-20256/#improving-all-the-pickers Hopefully it will come to all the different kinds of dropdowns soon.

BreizhHardware commented

2026-05-07 00:17:02 +02:00

Author

Owner

@inventor7777 commented on GitHub (Jul 11, 2025):

I’ve been noticing this issue with mine too and I figured I’d check here before making a bug report and I’m glad I did. I really like this theme so I hope HA can fix this issue soon.

@inventor7777 commented on GitHub (Jul 11, 2025): I’ve been noticing this issue with mine too and I figured I’d check here before making a bug report and I’m glad I did. I really like this theme so I hope HA can fix this issue soon.

BreizhHardware commented

2026-05-07 00:17:02 +02:00

Author

Owner

@kattcrazy commented on GitHub (Nov 13, 2025):

    ha-card:before {
      content: '';
      display: block;
      position: absolute;
      width: calc(100% - 2px);
      height: calc(100% - 2px);
      left: 0;
      top: 0;
      margin: 1px;
      pointer-events: none;
      backdrop-filter: blur(10px);
      inset: 0;
      clip-path: inset(0 round 20px);
      z-index: -1;
    }

I tried integrating part of this code into a theme but it ended up making the Homeassistant tab use 26gb of memory. The frosted glass look on the cards is great but having menus behind items & in the wrong places isn't ideal. Hope this can be fixed soon

@kattcrazy commented on GitHub (Nov 13, 2025): > ``` > ha-card:before { > content: ''; > display: block; > position: absolute; > width: calc(100% - 2px); > height: calc(100% - 2px); > left: 0; > top: 0; > margin: 1px; > pointer-events: none; > backdrop-filter: blur(10px); > inset: 0; > clip-path: inset(0 round 20px); > z-index: -1; > } > ``` I tried integrating part of this code into a theme but it ended up making the Homeassistant tab use **26gb** of memory. The frosted glass look on the cards is great but having menus behind items & in the wrong places isn't ideal. Hope this can be fixed soon

BreizhHardware commented

2026-05-07 00:17:02 +02:00

Author

Owner

@Nezz commented on GitHub (Mar 5, 2026):

Dropdowns have been finally fixed in HA 2026.3

@Nezz commented on GitHub (Mar 5, 2026): Dropdowns have been finally fixed in HA 2026.3

BreizhHardware commented

2026-05-07 00:17:02 +02:00

Author

Owner

@inventor7777 commented on GitHub (Mar 5, 2026):

FINALLY

It only took 2 years...I'll probably update just for that.

Edit: the new dropdowns also look better, less Material-Design-Default IMO.
Better contrast between options too!

@inventor7777 commented on GitHub (Mar 5, 2026): FINALLY It only took 2 years...I'll probably update just for that. Edit: the new dropdowns also look better, less Material-Design-Default IMO. Better contrast between options too!