[BUG] - Backdrop blur being applied on animation end

[simonetimi]

NextUI Version

2.4.2

Describe the bug

On the Dropdown component, applying a custom background works as expected. However, when applying a tailwind class like backdrop-blur-lg, the effect is applied only at the end of the opening animation, unlike other classes like bg-color.

In my case, I'm trying to make the style consistent with the rest of the UI. Having some semi-transparent UI elements, blur is necessary to keep the text readable. Having it switch to blur only after the animation ends makes it unpleasant. For now I'm disabling the animation but it's obviously not ideal.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Add backdrop blur tailwind class to a Dropdown component
2. Click on the dropdown trigger

JSX code in client component

<Dropdown
    className="bg-white/40 backdrop-blur-lg dark:bg-black/40"
>
    <DropdownTrigger>
        <Button isIconOnly className="bg-transparent" disableRipple>
            <EllipsisVerticalIcon width={20} />
        </Button>
    </DropdownTrigger>
    <DropdownMenu aria-label="Todo Actions">
        <DropdownItem key="details" onPress={onOpen}>
            Show details
        </DropdownItem>
        <DropdownItem key="edit">Edit</DropdownItem>
        <DropdownItem
            key="delete"
            className="text-danger"
            color="danger"
        >
            Delete
        </DropdownItem>
    </DropdownMenu>
</Dropdown>

Expected behavior

The blur effect should be displayed consistently with the other styles, at the beginning of the animation.

Screenshots or Videos

During the animation

After the animation

Operating System Version

macOS

Browser

Chrome

[linear[bot]]

ENG-1149 [BUG] - Backdrop blur being applied on animation end

[Tejas-Sands]

there is a property in dropdown called backdrop , in which you can select blur option it doesn't have the animation problem but blurs out the background too

[simonetimi]

there is a property in dropdown called backdrop , in which you can select blur option it doesn't have the animation problem but blurs out the background too

That option will have an effect on the whole page (expect for the menu), I'm looking for the exact opposite (I need the menu background to be blurred). So far I can either use a solid background (which unfortunately doesn't match with the rest of the UI) or disable the animation.

[Tejas-Sands]

I think this problem occurs because backdrop property is added in pop over prop Instead it should have been added to the menu prop

[awesome-pro]

@simonetimi can you minimal reproducible enviroment like CodeSankBox or StackBlitz

[simonetimi]

@simonetimi can you minimal reproducible enviroment like CodeSankBox or StackBlitz

I set it up on StackBlitz: sandbox

I put some text underneath. When clicking the button, the blur on the menu bg will show only when the animation ends. The sandbox doesn't work for me in Safari for some reason, but this bug is not present in safari anyway.

[awesome-pro]

@simonetimi I observed you issue, the effect is visible in Chrome and Firefox but not in safari . I am working on it and will help you soon

[ritik3236]

any updates?

[ritik3236]

6 months, 1 week and 2 days passed still no update ?

[amandakelake]

Mark, wait for updates

[kzroo]

yeah the reason why is because of the animation from framer-motion.

So to fix this, pass the motion props and add the backdrop-blur style to it like this:

<Dropdown motionProps={{
                    style: {
                        backdropFilter: "blur(var(--blur-lg)) saturate(150%)",
                        borderRadius: "var(--radius-xl)",
                    }
                }}
... rest of your code

OR, just put disableAnimation prop on your dropdown.