Bad backdrop filter

[Wollace-Buarque]

Describe the feature / bug 📝:

As you can see only the middle toast is blurred because I put a tailwind class to try remove the blur:

If I don't have that tailwind class:

Now only the middle one isn't blurred, and what I want it's that every toast be legible without blur effect.

Steps to reproduce the bug 🔁:

Just run a toast.

[lucas-ellwanger]

I have the same issue here, currently on W11 23H2 and Chrome 121.0.6167.161.

[devmanbr]

up

[emilkowalski]

I don't follow, are the toasts blurry for you? There is no css added from sonner that might cause it. Which OS and browser are you using?

[devmanbr]

I don't follow, are the toasts blurry for you? There is no css added from sonner that might cause it. Which OS and browser are you using?

Check #334.

[Wollace-Buarque]

I don't follow, are the toasts blurry for you? There is no css added from sonner that might cause it. Which OS and browser are you using?

I'm using Edge and Chrome on Windows 11.

I know this problem and it's because the transform property, take a look at this:

https://stackoverflow.com/questions/14677490/blurry-text-after-using-css-transform-scale-in-chrome
https://stackoverflow.com/questions/36787529/how-to-fix-blurry-image-on-transform-scale
https://stackoverflow.com/questions/31109299/css-transform-translate-50-50-makes-texts-blurry

[emilkowalski]

Is this fixed in this preview link? https://sonner-git-fix-blurry-appearance-emilkowalski-s-team.vercel.app/

[Wollace-Buarque]

Is this fixed in this preview link? https://sonner-git-fix-blurry-appearance-emilkowalski-s-team.vercel.app/

I found another fix, setting the toastOptions={{ style: { willChange: 'unset' } }} fixed all blurs effect

[emilkowalski]

Can you try now? @Wollace-Buarque
https://sonner-git-fix-blurry-appearance-emilkowalski-s-team.vercel.app/

[Wollace-Buarque]

Can you try now? @Wollace-Buarque https://sonner-git-fix-blurry-appearance-emilkowalski-s-team.vercel.app/

It's solved.

[emilkowalski]

Fixed in #336