From ad32834ccd5c9ec38518eb883864564871883cec Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Mon, 16 Jun 2025 12:37:41 +0200
Subject: [PATCH] fix: Fix zoomed images blurry in Safari (#35052)

---
 .../features/ui/components/zoomable_image.tsx         | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/app/javascript/mastodon/features/ui/components/zoomable_image.tsx b/app/javascript/mastodon/features/ui/components/zoomable_image.tsx
index 85e29e6ae..09b39d3ef 100644
--- a/app/javascript/mastodon/features/ui/components/zoomable_image.tsx
+++ b/app/javascript/mastodon/features/ui/components/zoomable_image.tsx
@@ -2,7 +2,7 @@ import { useState, useCallback, useRef, useEffect } from 'react';
 
 import classNames from 'classnames';
 
-import { useSpring, animated, config } from '@react-spring/web';
+import { useSpring, animated, config, to } from '@react-spring/web';
 import { createUseGesture, dragAction, pinchAction } from '@use-gesture/react';
 
 import { Blurhash } from 'mastodon/components/blurhash';
@@ -276,6 +276,13 @@ export const ZoomableImage: React.FC<ZoomableImageProps> = ({
     setError(true);
   }, [setError]);
 
+  // Convert the default style transform to a matrix transform to work around
+  // Safari bug https://github.com/mastodon/mastodon/issues/35042
+  const transform = to(
+    [style.scale, style.x, style.y],
+    (s, x, y) => `matrix(${s}, 0, 0, ${s}, ${x}, ${y})`,
+  );
+
   return (
     <div
       className={classNames('zoomable-image', {
@@ -298,7 +305,7 @@ export const ZoomableImage: React.FC<ZoomableImageProps> = ({
       )}
 
       <animated.img
-        style={style}
+        style={{ transform }}
         role='presentation'
         ref={imageRef}
         alt={alt}