From 85486f045f5e224e0715ea435f9972b90197e304 Mon Sep 17 00:00:00 2001
From: Emil Kowalski <36730035+emilkowalski@users.noreply.github.com>
Date: Sun, 18 Feb 2024 10:48:28 +0100
Subject: [PATCH] Fix blurry appearance (#336)

* Fix blurry appearance

* remove will change
---
 src/styles.css | 50 ++++++++++----------------------------------------
 1 file changed, 10 insertions(+), 40 deletions(-)

diff --git a/src/styles.css b/src/styles.css
index cf89075..f97d360 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -27,21 +27,8 @@ html[dir='rtl'],
 [data-sonner-toaster] {
   position: fixed;
   width: var(--width);
-  font-family:
-    ui-sans-serif,
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    Segoe UI,
-    Roboto,
-    Helvetica Neue,
-    Arial,
-    Noto Sans,
-    sans-serif,
-    Apple Color Emoji,
-    Segoe UI Emoji,
-    Segoe UI Symbol,
-    Noto Color Emoji;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial,
+    Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
   --gray1: hsl(0, 0%, 99%);
   --gray2: hsl(0, 0%, 97.3%);
   --gray3: hsl(0, 0%, 95.1%);
@@ -91,14 +78,10 @@ html[dir='rtl'],
   position: absolute;
   opacity: 0;
   transform: var(--y);
+  filter: blur(0);
   /* https://stackoverflow.com/questions/48124372/pointermove-event-not-working-with-touch-why-not */
   touch-action: none;
-  will-change: transform, opacity, height;
-  transition:
-    transform 400ms,
-    opacity 400ms,
-    height 400ms,
-    box-shadow 200ms;
+  transition: transform 400ms, opacity 400ms, height 400ms, box-shadow 200ms;
   box-sizing: border-box;
   outline: none;
   overflow-wrap: anywhere;
@@ -119,9 +102,7 @@ html[dir='rtl'],
 }
 
 [data-sonner-toast]:focus-visible {
-  box-shadow:
-    0px 4px 12px rgba(0, 0, 0, 0.1),
-    0 0 0 2px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(0, 0, 0, 0.2);
 }
 
 [data-sonner-toast][data-y-position='top'] {
@@ -200,9 +181,7 @@ html[dir='rtl'],
   display: flex;
   align-items: center;
   flex-shrink: 0;
-  transition:
-    opacity 400ms,
-    box-shadow 200ms;
+  transition: opacity 400ms, box-shadow 200ms;
 }
 
 [data-sonner-toast] [data-button]:focus-visible {
@@ -241,16 +220,11 @@ html[dir='rtl'],
   border-radius: 50%;
   cursor: pointer;
   z-index: 1;
-  transition:
-    opacity 100ms,
-    background 200ms,
-    border-color 200ms;
+  transition: opacity 100ms, background 200ms, border-color 200ms;
 }
 
 [data-sonner-toast] [data-close-button]:focus-visible {
-  box-shadow:
-    0px 4px 12px rgba(0, 0, 0, 0.1),
-    0 0 0 2px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(0, 0, 0, 0.2);
 }
 
 [data-sonner-toast] [data-disabled='true'] {
@@ -344,9 +318,7 @@ html[dir='rtl'],
 [data-sonner-toast][data-removed='true'][data-front='false'][data-swipe-out='false'][data-expanded='false'] {
   --y: translateY(40%);
   opacity: 0;
-  transition:
-    transform 500ms,
-    opacity 200ms;
+  transition: transform 500ms, opacity 200ms;
 }
 
 /* Bump up the height to make sure hover state doesn't get set to false */
@@ -653,9 +625,7 @@ html[dir='rtl'],
   left: 50%;
   transform: translate(-50%, -50%);
   transform-origin: center;
-  transition:
-    opacity 200ms,
-    transform 200ms;
+  transition: opacity 200ms, transform 200ms;
 }
 
 .sonner-loader[data-visible='false'] {