- fix blinking issue of ripple spinner in mobile Safari

zbryikt · zbryikt · commit 3e7c19268e99 · 2022-04-22T10:29:25.000+08:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Change Logs
 
+# v2.0.2
+
+ - fix blinking issue of `ripple` spinner in mobile Safari
+
+
 # v2.0.1
 
  - add missing `vars.styl` and ensure build pass
diff --git a/dist/entries/ripple/index.css b/dist/entries/ripple/index.css
@@ -20,6 +20,20 @@
 }
 @keyframes lds-ripple {
   0% {
+    top: 36px;
+    left: 36px;
+    width: 8px;
+    height: 8px;
+    opacity: 0;
+  }
+  4.9% {
+    top: 36px;
+    left: 36px;
+    width: 8px;
+    height: 8px;
+    opacity: 0;
+  }
+  5% {
     top: 36px;
     left: 36px;
     width: 8px;
diff --git a/dist/entries/ripple/index.min.css b/dist/entries/ripple/index.min.css
diff --git a/dist/index.css b/dist/index.css
@@ -470,6 +470,20 @@
 }
 @keyframes lds-ripple {
   0% {
+    top: 36px;
+    left: 36px;
+    width: 8px;
+    height: 8px;
+    opacity: 0;
+  }
+  4.9% {
+    top: 36px;
+    left: 36px;
+    width: 8px;
+    height: 8px;
+    opacity: 0;
+  }
+  5% {
     top: 36px;
     left: 36px;
     width: 8px;
diff --git a/dist/index.min.css b/dist/index.min.css
diff --git a/dist/ripple.html b/dist/ripple.html
@@ -21,6 +21,20 @@
 }
 @keyframes lds-ripple {
   0% {
+    top: 36px;
+    left: 36px;
+    width: 8px;
+    height: 8px;
+    opacity: 0;
+  }
+  4.9% {
+    top: 36px;
+    left: 36px;
+    width: 8px;
+    height: 8px;
+    opacity: 0;
+  }
+  5% {
     top: 36px;
     left: 36px;
     width: 8px;
diff --git a/src/ripple/index.styl b/src/ripple/index.styl
@@ -3,6 +3,18 @@ borderSize = 4px
 
 @keyframes lds-ripple
   0%
+    top: prec-round(size * .5 - borderSize)
+    left: prec-round(size * .5 - borderSize)
+    width: borderSize * 2
+    height: borderSize * 2
+    opacity: 0
+  4.9%
+    top: prec-round(size * .5 - borderSize)
+    left: prec-round(size * .5 - borderSize)
+    width: borderSize * 2
+    height: borderSize * 2
+    opacity: 0
+  5%
     top: prec-round(size * .5 - borderSize)
     left: prec-round(size * .5 - borderSize)
     width: borderSize * 2
diff --git a/web/static/assets/lib/@loadingio/css-spinner/dev/entries/ripple/index.css b/web/static/assets/lib/@loadingio/css-spinner/dev/entries/ripple/index.css
@@ -20,6 +20,20 @@
 }
 @keyframes lds-ripple {
   0% {
+    top: 36px;
+    left: 36px;
+    width: 8px;
+    height: 8px;
+    opacity: 0;
+  }
+  4.9% {
+    top: 36px;
+    left: 36px;
+    width: 8px;
+    height: 8px;
+    opacity: 0;
+  }
+  5% {
     top: 36px;
     left: 36px;
     width: 8px;
diff --git a/web/static/assets/lib/@loadingio/css-spinner/dev/entries/ripple/index.min.css b/web/static/assets/lib/@loadingio/css-spinner/dev/entries/ripple/index.min.css
diff --git a/web/static/assets/lib/@loadingio/css-spinner/dev/index.css b/web/static/assets/lib/@loadingio/css-spinner/dev/index.css
@@ -470,6 +470,20 @@
 }
 @keyframes lds-ripple {
   0% {
+    top: 36px;
+    left: 36px;
+    width: 8px;
+    height: 8px;
+    opacity: 0;
+  }
+  4.9% {
+    top: 36px;
+    left: 36px;
+    width: 8px;
+    height: 8px;
+    opacity: 0;
+  }
+  5% {
     top: 36px;
     left: 36px;
     width: 8px;
diff --git a/web/static/assets/lib/@loadingio/css-spinner/dev/index.min.css b/web/static/assets/lib/@loadingio/css-spinner/dev/index.min.css
diff --git a/web/static/assets/lib/@loadingio/css-spinner/dev/ripple.html b/web/static/assets/lib/@loadingio/css-spinner/dev/ripple.html
@@ -21,6 +21,20 @@
 }
 @keyframes lds-ripple {
   0% {
+    top: 36px;
+    left: 36px;
+    width: 8px;
+    height: 8px;
+    opacity: 0;
+  }
+  4.9% {
+    top: 36px;
+    left: 36px;
+    width: 8px;
+    height: 8px;
+    opacity: 0;
+  }
+  5% {
     top: 36px;
     left: 36px;
     width: 8px;
