Fixed safari bugs

Steveeeie · Nov 18, 2020 · 28ee857 · 28ee857
1 parent 6e56b2f
commit 28ee857
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 19 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/lib/animations.js b/src/lib/animations.js
@@ -4,15 +4,15 @@ export const animations = {
   moveToLeft: {
     keyframes: keyframes`
       from { }
-      to { transform: translateX(-100%); }
+      to { transform: translateX(-100%) rotateZ(0.01deg); }
     `,
     duration: 600,
     timing: 'ease',
     fill: 'both'
   },
   moveFromLeft: {
     keyframes: keyframes`
-      from {  transform: translateX(-100%) };
+      from {  transform: translateX(-100%) rotateZ(0.01deg); }
     `,
     duration: 600,
     timing: 'ease',
@@ -21,15 +21,15 @@ export const animations = {
   moveToRight: {
     keyframes: keyframes`
       from { }
-      to { transform: translateX(100%); }
+      to { transform: translateX(100%) rotateZ(0.01deg); }
     `,
     duration: 600,
     timing: 'ease',
     fill: 'both'
   },
   moveFromRight: {
     keyframes: keyframes`
-      from { transform: translateX(100%); }
+      from { transform: translateX(100%) rotateZ(0.01deg); }
     `,
     duration: 600,
     timing: 'ease',
@@ -38,15 +38,15 @@ export const animations = {
   moveToTop: {
     keyframes: keyframes`
       from { }
-      to { transform: translateY(-100%); }
+      to { transform: translateY(-100%) rotateZ(0.01deg); }
     `,
     duration: 600,
     timing: 'ease',
     fill: 'both'
   },
   moveFromTop: {
     keyframes: keyframes`
-      from { transform: translateY(-100%); }
+      from { transform: translateY(-100%) rotateZ(0.01deg); }
     `,
     duration: 600,
     timing: 'ease',
@@ -55,15 +55,15 @@ export const animations = {
   moveToBottom: {
     keyframes: keyframes`
       from { }
-      to { transform: translateY(100%); }
+      to { transform: translateY(100%) rotateZ(0.01deg); }
     `,
     duration: 600,
     timing: 'ease',
     fill: 'both'
   },
   moveFromBottom: {
     keyframes: keyframes`
-      from { transform: translateY(100%); }
+      from { transform: translateY(100%) rotateZ(0.01deg); }
     `,
     duration: 600,
     timing: 'ease',
@@ -81,15 +81,15 @@ export const animations = {
   moveToLeftFade: {
     keyframes: keyframes`
       from { }
-      to { opacity: 0.3; transform: translateX(-100%); }
+      to { opacity: 0.3; transform: translateX(-100%) rotateZ(0.01deg); }
     `,
     duration: 700,
     timing: 'ease',
     fill: 'both'
   },
   moveFromLeftFade: {
     keyframes: keyframes`
-      from { opacity: 0.3;  transform: translateX(-100%); }
+      from { opacity: 0.3;  transform: translateX(-100%) rotateZ(0.01deg); }
     `,
     duration: 700,
     timing: 'ease',
@@ -98,15 +98,15 @@ export const animations = {
   moveToRightFade: {
     keyframes: keyframes`
       from { }
-      to { opacity: 0.3;  transform: translateX(100%); }
+      to { opacity: 0.3;  transform: translateX(100%) rotateZ(0.01deg); }
     `,
     duration: 700,
     timing: 'ease',
     fill: 'both'
   },
   moveFromRightFade: {
     keyframes: keyframes`
-      from { opacity: 0.3; transform: translateX(100%); }
+      from { opacity: 0.3; transform: translateX(100%) rotateZ(0.01deg); }
     `,
     duration: 700,
     timing: 'ease',
@@ -115,15 +115,15 @@ export const animations = {
   moveToTopFade: {
     keyframes: keyframes`
       from { }
-      to { opacity: 0.3; transform: translateY(-100%); }
+      to { opacity: 0.3; transform: translateY(-100%) rotateZ(0.01deg); }
     `,
     duration: 600,
     timing: 'ease',
     fill: 'both'
   },
   moveFromTopFade: {
     keyframes: keyframes`
-      from { opacity: 0.3; transform: translateY(-100%); }
+      from { opacity: 0.3; transform: translateY(-100%) rotateZ(0.01deg); }
     `,
     duration: 700,
     timing: 'ease',
@@ -132,15 +132,15 @@ export const animations = {
   moveToBottomFade: {
     keyframes: keyframes`
       from { }
-      to { opacity: 0.3;  transform: translateY(100%); }
+      to { opacity: 0.3;  transform: translateY(100%) rotateZ(0.01deg); }
     `,
     duration: 700,
     timing: 'ease',
     fill: 'both'
   },
   moveFromBottomFade: {
     keyframes: keyframes`
-      from { opacity: 0.3; transform: translateY(100%); }
+      from { opacity: 0.3; transform: translateY(100%) rotateZ(0.01deg); }
     `,
     duration: 700,
     timing: 'ease',

diff --git a/src/lib/styles.js b/src/lib/styles.js
@@ -53,6 +53,7 @@ export const PageTransitionWrapper = styled.div`
   transform-style: preserve-3d;
   transform: translate3d(0, 0, 0);
   width: 100%;
+  will-change: tranform;
 
   ${({ state }) => stateMap[state]};
 `;