fix: safari flipcard not working

KyberNetwork · Jul 26, 2023 · 826b7b9 · 826b7b9
1 parent 99587dd
commit 826b7b9
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/src/pages/MyEarnings/ElasticPools/SinglePosition/index.tsx b/src/pages/MyEarnings/ElasticPools/SinglePosition/index.tsx
@@ -35,7 +35,6 @@ const FlipCardFront = styled.div`
   position: absolute;
   width: 100%;
   height: 100%;
-  -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
 `
 
@@ -105,6 +104,13 @@ const SinglePosition: React.FC<Props> = ({
     currency1,
   }
 
+  // Can not interact with flipcard on safari. fuck apple
+  const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
+
+  if (isSafari) {
+    return <FlipCard>{isViewEarnings ? <EarningView {...props} /> : <PositionView {...props} />}</FlipCard>
+  }
+
   return (
     <FlipCard>
       <FlipCardInner flip={!isViewEarnings}>

diff --git a/src/pages/MyEarnings/PoolFilteringBar/ViewEarningOrPositionButton.tsx b/src/pages/MyEarnings/PoolFilteringBar/ViewEarningOrPositionButton.tsx
@@ -22,6 +22,7 @@ const CustomButton = styled.div<{ isActive: boolean }>`
   font-weight: 500;
   font-size: 12px;
   transition: all 0.2s ease;
+  height: 32px;
   display: flex;
   align-items: center;
   gap: 2px;