Ellipsis menus fail to fully render when below cursor

[strchild]

Checklist

• I have updated to the latest available Home Assistant version.
• I have cleared the cache of my browser.
• I have tried a different browser to see if it is related to my browser.
• I have tried reproducing the issue in safe mode to rule out problems with unsupported custom resources.

Describe the issue you are experiencing

The three-dot ellipsis menu renders with a fully transparent background upon opening when displaying below the cursor location, causing the listed items to be difficult to read and non-interactive/non-clickable in areas where the menu overlaps other UI elements beneath it. If the cursor is near the bottom of the window and the menu is forced to open above the cursor location, the menu renders correctly. This behavior is consistent across both Windows 7 and 8.1 in Firefox, Chrome, and Opera (probably irrelevant to test Opera as it uses the same Chromium version as Chrome) browsers. The menu renders correctly on Windows 10 and in the app on Android 11.

Describe the behavior you expected

The three-dot ellipsis menu should render with an opaque background (not transparent), ensuring all menu items are clearly visible, readable, and fully selectable/clickable—even when the menu overlaps other UI elements underneath, irrespective of its placement relative to the cursor.

Steps to reproduce the issue

1. In Windows 7 or 8.x, open any web browser to Home Assistant
2. Navigate to any dialog or screen with an ellipsis menu
3. Open the ellipsis menu
   ...

What version of Home Assistant Core has the issue?

2026.2.1

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue?

Chrome (109.0.5414.168), Firefox (115.32.0esr), Opera (95.0.4635.90)

Which operating system are you using to run this browser?

Windows 7, 8.1, 10, and the app on Android 11

State of relevant entities

Problem-relevant frontend configuration

JavaScript errors shown in your browser console/inspector

Additional information

No response

[EyalRotem]

I too have this issue-
But on an iPhone 14 pro, iOS 16.3.1.

home assistant core: 2026.2.1

This started around the February release.

It happens both in the app and in the safari browser.
I have an iPad with iOS 18 that doesn't have this issue.
Also in my desktop, using edge/firefox- no issues.

[silamon]

We're using the webawesome library, can you try if you can reproduce the same issue on

• https://webawesome.com/docs/components/dropdown
• https://design.home-assistant.io/#components/ha-dropdown

[strchild]

At first glance, the Web Awesome page linked to doesn't even attempt to render the same between Windows 10 and earlier versions of Windows. Both examples are using the Firefox browser, however I can confirm Chromium behaves in the exact same manner, working fine with the current release on Windows 10 and rendering incorrectly in older versions of Windows. The issue is not the OS but the mechanism by which the content is being rendered by the different browser versions. When Firefox ESR 115.XX.X is run on Windows 10, the same issues arise. There is clearly a change in how newer browser versions are rendering the Web Awesome content, whether it's a change to the underlying code handling or path specific code in the Web Awesome content.

Windows 8.1 screenshot of Web Awesome link and HA Dropdown:

Windows 10 screenshot of Web Awesome link and HA Dropdown:

[EyalRotem]

We're using the webawesome library, can you try if you can reproduce the same issue on

• https://webawesome.com/docs/components/dropdown
• https://design.home-assistant.io/#components/ha-dropdown

On iOS 16.3.1, safari, these links have no dropdowns at all, the sites are totally broken.