From c17df709a6539bfa9e79570ee79fbd36b393a71b Mon Sep 17 00:00:00 2001
From: jongomez <jon.olive.gomez@gmail.com>
Date: Mon, 25 Sep 2023 18:39:50 +0100
Subject: [PATCH] better handling of opacity after pinch zooming

---
 src/components/LightBox/LightBox.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/LightBox/LightBox.tsx b/src/components/LightBox/LightBox.tsx
index d29c4d8..83fc0ed 100644
--- a/src/components/LightBox/LightBox.tsx
+++ b/src/components/LightBox/LightBox.tsx
@@ -180,6 +180,12 @@ export const LightBox = ({ children, caption }: LightBoxProps) => {
       </>
     )
 
+  // Edge case: if the user pinches to zoom in, and presses the exit fullscreen button,
+  // the opacity of the caption will be set to 0. This will reset it to 1.
+  if (captionRef.current) {
+    captionRef.current.style.opacity = '1'
+  }
+
   return (
     <>
       {isActive && (
@@ -232,9 +238,6 @@ const LightBoxCaption = styled.figcaption<{ isActive?: boolean }>`
     height: 72px;
     overflow: auto;
     `}
-
-  // Edge case: when users are pinch zooming and press exit fullscreen - opacity will be 0. 
-  ${(props) => !props.isActive && `opacity: 1 !important;`}
 `
 
 const Backdrop = styled.div`