why the blurry appearance?

[devmanbr]

Describe the feature / bug 📝:

I took this screenshot from the package website. the appearance of toasts is blurred in all cases, and it is not possible to disable this behavior (at least not completely).

I use the following code to disable this effect:

<Toaster
toastOptions={{
style: { filter: 'blur(0)' },
}}
/>

however, this code only works for the first toast. the rest (old) remain blurred.

appearance like this, at least for me, is somewhat undesirable. There needs to be a way to disable this without having to style everything from scratch.

Steps to reproduce the bug 🔁:

the text above makes it clear. it is default behavior.

[emilkowalski]

There is no blur added to the toast, which browser are you using and which os?

[devmanbr]

I created two reproductions so you can see the difference.

this is a reproduction of the default, exactly as it appears on the website. just click the button, in the preview, to see the toast (like on the website):
https://codesandbox.io/p/sandbox/sonner-default-behavior-49hvkf

this is the same default code, just with one addition: the options that remove the filter (as I mentioned in the initial message):
https://codesandbox.io/p/sandbox/sonner-removing-blur-7mzvyg

if you place both windows side by side and click on the buttons, you will see that the last example I gave (with the options that remove the filter) has a clear appearance. in the original example (without disabling the filter) it is blurred.

if this is unintentional, it is important to find the source of the problem and fix it. if it's intentional, we should have a way to disable this behavior without having to style everything from scratch.

I'm using Windows. the problem mainly exists on Chromium-based browsers (Chrome, Edge, Opera and others). On Firefox the problem exists, but it is subtle.

[emilkowalski]

I'm not able to reproduce on any of the sandboxes.

Like I said, nothing in the code adds a blur. It's likely a browser bug related to Windows. Good temporary solution could be adding filter: 'blur(0)' to the package itself as it's difficult to debug without the ability to reproduce. Can you provide your browser and windows versions?

[emilkowalski]

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

[andrerocco]

I have also noticed this.
@emilkowalski not fixed on this new version, at least for me.

But I have experienced that before when I used transform: translate (mostly when using percentage values). I imagine this has something to do with positioning the element in a not integer pixel values and the way the browser decides to do the rendering when that happens. But I haven't looked at any of the code so I can't be sure.

In my experience this happens on Windows in most Chromium based browsers (it appears blurry like that in Vivaldi, Chrome, Opera but not on Firefox for example).

[emilkowalski]

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

[devmanbr]

I'm not able to reproduce on any of the sandboxes.

Like I said, nothing in the code adds a blur. It's likely a browser bug related to Windows. Good temporary solution could be adding filter: 'blur(0)' to the package itself as it's difficult to debug without the ability to reproduce. Can you provide your browser and windows versions?

In the current published version (1.4.0), I tested and confirmed the issue in the following environments:

Windows 10 22H2 19045.4046:

• Chrome 121.0.6167.185
• Edge 121.0.2277.112
• Edge Canary 123.0.2407.0
• Opera 106.0.4998.70
• Firefox 121.0.1

Ubuntu 22.04.3:

• Chrome 121.0.6167.184
• Firefox 119.0

as I said before, on Firefox the problem is very slight.

---

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

In the provided link, apparently it's fixed.

[emilkowalski]

Fixed in #336

[andrerocco]

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

Fixed indeedd @emilkowalski! Nice one. What was the fix?