Merge pull request jolaleye#8 from zmj97/master

fix bubble effect bugs in safari
nucleako · Jun 13, 2019 · f6b4b80 · f6b4b80
2 parents 34d5646 + 09a9f4d
commit f6b4b80
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 10 deletions.
diff --git a/effects/button-bubble-bl.vue b/effects/button-bubble-bl.vue
@@ -28,7 +28,7 @@ button::before {
   border-radius: 50%;
   background-color: #3cefff;
   transform-origin: center;
-  transform: translate(50%, -50%) scale(0);
+  transform: translate3d(50%, -50%, 0) scale3d(0, 0, 0);
   transition: transform 0.45s ease-in-out;
 }
 
@@ -38,6 +38,6 @@ button:hover {
 }
 
 button:hover::before {
-  transform: translate(50%, -50%) scale(15);
+  transform: translate3d(50%, -50%, 0) scale3d(15, 15, 15);
 }
 </style>
diff --git a/effects/button-bubble-br.vue b/effects/button-bubble-br.vue
@@ -28,7 +28,7 @@ button::before {
   border-radius: 50%;
   background-color: #3cefff;
   transform-origin: center;
-  transform: translate(-50%, -50%) scale(0);
+  transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);
   transition: transform 0.45s ease-in-out;
 }
 
@@ -38,6 +38,6 @@ button:hover {
 }
 
 button:hover::before {
-  transform: translate(-50%, -50%) scale(15);
+  transform: translate3d(-50%, -50%, 0) scale3d(15, 15, 15);
 }
 </style>
diff --git a/effects/button-bubble-tl.vue b/effects/button-bubble-tl.vue
@@ -28,7 +28,7 @@ button::before {
   border-radius: 50%;
   background-color: #3cefff;
   transform-origin: center;
-  transform: translate(50%, 50%) scale(0);
+  transform: translate3d(50%, 50%, 0) scale3d(0, 0, 0);
   transition: transform 0.45s ease-in-out;
 }
 
@@ -38,6 +38,6 @@ button:hover {
 }
 
 button:hover::before {
-  transform: translate(50%, 50%) scale(15);
+  transform: translate3d(50%, 50%, 0) scale3d(15, 15, 15);
 }
 </style>
diff --git a/effects/button-bubble-tr.vue b/effects/button-bubble-tr.vue
@@ -28,7 +28,7 @@ button::before {
   border-radius: 50%;
   background-color: #3cefff;
   transform-origin: center;
-  transform: translate(-50%, 50%) scale(0);
+  transform: translate3d(-50%, 50%, 0) scale3d(0, 0, 0);
   transition: transform 0.45s ease-in-out;
 }
 
@@ -38,6 +38,6 @@ button:hover {
 }
 
 button:hover::before {
-  transform: translate(-50%, 50%) scale(15);
+  transform: translate3d(-50%, 50%, 0) scale3d(15, 15, 15);
 }
 </style>
diff --git a/effects/button-bubble.vue b/effects/button-bubble.vue
@@ -28,7 +28,7 @@ button::before {
   border-radius: 50%;
   background-color: #3cefff;
   transform-origin: center;
-  transform: translate(-50%, -50%) scale(0);
+  transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);
   transition: transform 0.45s ease-in-out;
 }
 
@@ -38,6 +38,6 @@ button:hover {
 }
 
 button:hover::before {
-  transform: translate(-50%, -50%) scale(15);
+  transform: translate3d(-50%, -50%, 0) scale3d(15, 15, 15);
 }
 </style>