Blurry toasts (by default)
nikitaeverywhere opened this issue · comments
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?
same here
find out that this thing cause a problem and unchecking it make it look ok
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.
@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.
this is weird. changing anything in terms of css fixes this problem. I just changed the background-color and it fixes the issue.
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.