From ea4db6bdcfdf0922e6cee11e3b6023e3a4bfbd24 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 9 Apr 2023 19:46:49 +0800
Subject: [PATCH] Attempt to fix weird unloaded image on Mobile Safari

---
 src/components/media.jsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/media.jsx b/src/components/media.jsx
index 0e83fbdb..4a8e3c70 100644
--- a/src/components/media.jsx
+++ b/src/components/media.jsx
@@ -1,5 +1,5 @@
 import { getBlurHashAverageColor } from 'fast-blurhash';
-import { useCallback, useRef } from 'preact/hooks';
+import { useCallback, useRef, useState } from 'preact/hooks';
 import QuickPinchZoom, { make3dTransformValue } from 'react-quick-pinch-zoom';
 
 import Icon from './icon';
@@ -54,7 +54,9 @@ function Media({ media, showOriginal, autoAnimate, onClick = () => {} }) {
     }
   }, []);
 
+  const [pinchZoomEnabled, setPinchZoomEnabled] = useState(false);
   const quickPinchZoomProps = {
+    enabled: pinchZoomEnabled,
     draggableUnZoomed: false,
     inertiaFriction: 0.9,
     containerProps: {
@@ -97,6 +99,7 @@ function Media({ media, showOriginal, autoAnimate, onClick = () => {} }) {
               onLoad={(e) => {
                 e.target.closest('.media-image').style.backgroundImage = '';
                 e.target.closest('.media-zoom').style.display = '';
+                setPinchZoomEnabled(true);
               }}
             />
           </QuickPinchZoom>
@@ -180,7 +183,7 @@ function Media({ media, showOriginal, autoAnimate, onClick = () => {} }) {
       >
         {showOriginal || autoGIFAnimate ? (
           isGIF && showOriginal ? (
-            <QuickPinchZoom {...quickPinchZoomProps}>
+            <QuickPinchZoom {...quickPinchZoomProps} enabled>
               <div
                 ref={mediaRef}
                 dangerouslySetInnerHTML={{