Skip to content

Arrow Hidden When backdrop-blur Is Used on DropdownMenu #4294

Open
@Shahryar1991

Description

@Shahryar1991

Environment

Operating System: Windows 11
Node Version: v22.14.0
Nuxt Version: 3.17.3
Nitro Version: 2.11.12
Browser: Firefox v139.0.1

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.1.3

Reproduction

https://codesandbox.io/p/devbox/arrow-issue-in-dropdownmenu-jmq5jf

Description

Hi,
I've noticed an issue when using backdrop-blur on DropdownMenu. When the backdrop-blur utility is applied to the background, the arrow becomes hidden or invisible. However, once I remove the backdrop-blur, the arrow displays correctly again.

I've created an example with two DropdownMenus — one with backdrop-blur applied and one without. You should be able to see the issue.

Could you please take a look and fix the issue? Thank you!

Additional context

No response

Logs

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingtriagev3#1289

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions