Blurry toasts (by default)

[nikitaeverywhere]

Thanks for a very good looking library.

It is really the first thing you can see when visiting your demo.

This is in Webkit Chrome on my Ultrawide 1440p monitor. You can see that only the first (most recent) message is sharp, and the text of those below it is a bit blurry.

-webkit-font-smoothing doesn't help. Is there a way to fix this?

[MRezaSafari]

same here

find out that this thing cause a problem and unchecking it make it look ok

[nikitaeverywhere]

find out that this thing cause a problem and unchecking it make it look ok

@MRezaSafari thanks for suggestion. I doubt it works: I tried unchecking it, and it's still blurry.

The root cause of the issue is this transform, which is not rounded to an integer after the animation is done:

I guess it is computed inside the library, so it's not a thing that can be fixed just with CSS.

[nikitaeverywhere]

@MRezaSafari okay I think I fixed it with CSS.

The problem was that the computed value of translateY inherited the block's height which was not an integer.

Once I set a height of the role="status" div to an integer (with line-height), the blurry problem went away.

I think this is a workaround, but the ultimate solution should land in the library as rounding the final Y position of the toast to the closest integer, or fix the default styles of the library.

[MRezaSafari]

this is weird. changing anything in terms of css fixes this problem. I just changed the background-color and it fixes the issue.

[nikitaeverywhere]

this is weird. changing anything in terms of css fixes this problem. I just changed the background-color and it fixes the issue.

I believe you're not in desktop Chrome. It depends on the rendering technique the browser uses.

[mehdi-mashayekhi]

How to Fix Blurry Text with transform: translateY(-153px); One simple solution to the blurry text issue in this situation is to round the translation values to whole numbers. Instead of using transform: translateY(-153px);, you can use transform: translateY(-152px); or transform: translateY(-154px);.

This fixes the problem because some browsers, especially on low-resolution devices, may render text at a lower resolution when using fractional values for CSS transforms. This can lead to blurry or pixelated text.

By rounding the translation values to whole numbers, you can prevent this issue and maintain crisp text across all devices.

you must set this :

<Toaster gutter={7.5} />