From 2e16649119a5d857658149cee85baf6054cf4062 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Fri, 23 Feb 2024 12:51:10 -0600
Subject: [PATCH] Fix poorly blurred placeholder data generated by Safari

---
 src/components/ImageBlurFallback.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/ImageBlurFallback.tsx b/src/components/ImageBlurFallback.tsx
index 118d2643..e8e0842c 100644
--- a/src/components/ImageBlurFallback.tsx
+++ b/src/components/ImageBlurFallback.tsx
@@ -51,7 +51,7 @@ export default function ImageBlurFallback(props: ImageProps) {
     <div
       className={clsx(
         className,
-        'flex relative',
+        'flex relative overflow-hidden',
         'bg-gray-100/50 dark:bg-gray-900/50',
       )}
     >
@@ -63,6 +63,8 @@ export default function ImageBlurFallback(props: ImageProps) {
             imageClassName,
             'absolute',
             'transition-opacity duration-300 ease-in',
+            // Fix poorly blurred placeholder data generated by Safari
+            'blur-md scale-105',
             isLoading ? 'opacity-100' : 'opacity-0',
           ),
         }} />}