fix safari scroll #120

AaronCCWong · May 25, 2024 · 8c0096b · 8c0096b
1 parent 72de968
commit 8c0096b
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 12 deletions.
diff --git a/lib/ReactCardFlip.js b/lib/ReactCardFlip.js
@@ -67,7 +67,7 @@ var ReactCardFlip = function (props) {
     var frontRotateX = "rotateX(".concat(infinite ? rotation : isFlipped ? 180 : 0, "deg)");
     var backRotateX = "rotateX(".concat(infinite ? rotation + 180 : isFlipped ? 0 : -180, "deg)");
     var styles = {
-        back: __assign({ WebkitBackfaceVisibility: 'hidden', backfaceVisibility: 'hidden', height: '100%', left: '0', position: isFlipped ? 'relative' : 'absolute', top: '0', transform: flipDirection === 'horizontal' ? backRotateY : backRotateX, transformStyle: 'preserve-3d', transition: "".concat(flipSpeedFrontToBack, "s"), width: '100%' }, back),
+        back: __assign({ WebkitBackfaceVisibility: 'hidden', backfaceVisibility: 'hidden', height: '100%', left: '0', position: isFlipped ? 'relative' : 'absolute', top: '0', transform: (flipDirection === 'horizontal' ? backRotateY : backRotateX) + ' translateZ(1px)', transformStyle: 'preserve-3d', transition: "".concat(flipSpeedFrontToBack, "s"), width: '100%' }, back),
         container: {
             perspective: '1000px',
             zIndex: "".concat(cardZIndex),

diff --git a/src/ReactCardFlip.tsx b/src/ReactCardFlip.tsx
@@ -17,7 +17,7 @@ const ReactCardFlip: React.FC<ReactFlipCardProps> = (props) => {
     flipSpeedBackToFront,
     infinite,
     isFlipped,
-  } = { 
+  } = {
     cardStyles: {
       back: {},
       front: {},
@@ -31,7 +31,7 @@ const ReactCardFlip: React.FC<ReactFlipCardProps> = (props) => {
     isFlipped: false,
     ...props
   }
-  
+
   const [isFlippedState, setFlipped] = useState(isFlipped);
   const [rotation, setRotation] = useState(0);
 
@@ -80,7 +80,7 @@ const ReactCardFlip: React.FC<ReactFlipCardProps> = (props) => {
       left: '0',
       position: isFlipped ? 'relative' : 'absolute',
       top: '0',
-      transform: flipDirection === 'horizontal' ? backRotateY : backRotateX,
+      transform: (flipDirection === 'horizontal' ? backRotateY : backRotateX) + ' translateZ(1px)',
       transformStyle: 'preserve-3d',
       transition: `${flipSpeedFrontToBack}s`,
       width: '100%',

diff --git a/test/ReactCardFlip.test.tsx b/test/ReactCardFlip.test.tsx
@@ -29,7 +29,7 @@ describe('Flipping', () => {
       'rotateY(0deg)'
     );
     expect(querySelectorHTML(container, ".react-card-back").style.transform).toBe(
-      'rotateY(-180deg)'
+      'rotateY(-180deg) translateZ(1px)'
     );
 
     rerender(<Card isFlipped={true}/>)
@@ -38,7 +38,7 @@ describe('Flipping', () => {
       'rotateY(180deg)'
     );
     expect(querySelectorHTML(container, ".react-card-back").style.transform).toBe(
-      'rotateY(0deg)'
+      'rotateY(0deg) translateZ(1px)'
     );
   });
 
@@ -60,7 +60,7 @@ describe('Flipping', () => {
       'rotateX(0deg)'
     );
     expect(querySelectorHTML(container, ".react-card-back").style.transform).toBe(
-      'rotateX(-180deg)'
+      'rotateX(-180deg) translateZ(1px)'
     );
 
     rerender(<Card isFlipped={true}/>);
@@ -69,7 +69,7 @@ describe('Flipping', () => {
       'rotateX(180deg)'
     );
     expect(querySelectorHTML(container, ".react-card-back").style.transform).toBe(
-      'rotateX(0deg)'
+      'rotateX(0deg) translateZ(1px)'
     );
   });
 
@@ -93,7 +93,7 @@ describe('Flipping', () => {
       'rotateY(0deg)'
     );
     expect(querySelectorHTML(container, ".react-card-back").style.transform).toBe(
-      'rotateY(180deg)'
+      'rotateY(180deg) translateZ(1px)'
     );
 
     let isFlipped = true;
@@ -104,7 +104,7 @@ describe('Flipping', () => {
         `rotateY(${0 + i * 180}deg)`
       );
       expect(querySelectorHTML(container, ".react-card-back").style.transform).toBe(
-        `rotateY(${180 + i * 180}deg)`
+        `rotateY(${180 + i * 180}deg) translateZ(1px)`
       );
 
       isFlipped = !isFlipped;
@@ -131,7 +131,7 @@ describe('Flipping', () => {
       'rotateY(180deg)'
     );
     expect(querySelectorHTML(container, ".react-card-back").style.transform).toBe(
-      'rotateY(0deg)'
+      'rotateY(0deg) translateZ(1px)'
     );
 
     rerender(<Card isFlipped={true}/>);
@@ -140,7 +140,7 @@ describe('Flipping', () => {
       'rotateY(180deg)'
     );
     expect(querySelectorHTML(container, ".react-card-back").style.transform).toBe(
-      'rotateY(0deg)'
+      'rotateY(0deg) translateZ(1px)'
     );
   });
 });