Fix poorly blurred placeholder data generated by Safari

2024-02-23 12:51:10 -06:00 · 2024-02-23 12:51:10 -06:00 · 2e16649119
commit 2e16649119
parent a055783c26
1 changed files with 3 additions and 1 deletions
--- 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',
          ),
        }} />}