Fixed gradients in iOS Webkit browsers

IanLunn · Dec 28, 2014 · 99dbc09 · 99dbc09
1 parent 2ed195b
commit 99dbc09
Show file tree

Hide file tree

Showing 8 changed files with 14 additions and 6 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "Hover.css",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "homepage": "http://ianlunn.github.io/Hover",
   "authors": [
     "Ian Lunn <[email protected]>"

diff --git a/css/hover-min.css b/css/hover-min.css
diff --git a/css/hover.css b/css/hover.css
@@ -1,6 +1,6 @@
 /*!
  * Hover.css (http://ianlunn.co.uk/)
- * Version: 1.0.9
+ * Version: 1.0.10
  * Author: Ian Lunn @IanLunn
  * Author URL: http://ianlunn.co.uk/
  * Github: https://github.com/IanLunn/Hover
@@ -1414,6 +1414,7 @@
   height: 10px;
   width: 90%;
   opacity: 0;
+  background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
   background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
   /* W3C */
   -webkit-transition-duration: 0.3s;
@@ -1519,6 +1520,7 @@
   height: 10px;
   width: 90%;
   opacity: 0;
+  background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
   background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
   /* W3C */
   -webkit-transition-duration: 0.3s;
@@ -1585,10 +1587,12 @@
 }
 .shadow-radial:before {
   bottom: 100%;
+  background: -webkit-radial-gradient(50% 150%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
   background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
 }
 .shadow-radial:after {
   top: 100%;
+  background: -webkit-radial-gradient(50% -50%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
   background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
 }
 .shadow-radial:hover:before, .shadow-radial:focus:before, .shadow-radial:active:before, .shadow-radial:hover:after, .shadow-radial:focus:after, .shadow-radial:active:after {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Hover.css",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "author": "Ian Lunn",
   "devDependencies": {
     "grunt": "~0.4.1",

diff --git a/scss/effects/_float-shadow.scss b/scss/effects/_float-shadow.scss
@@ -18,6 +18,7 @@
 	  height: 10px;
 	  width: 90%;
 	  opacity: 0;
+	  background: -webkit-radial-gradient(center, ellipse, rgba(0,0,0,.35) 0%, rgba(0, 0, 0, 0) 80%);
 	  background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 80%); /* W3C */
 		@include prefixed(transition-duration, $defaultDuration);
 		@include prefixed(transition-property, "transform, opacity");

diff --git a/scss/effects/_hover-shadow.scss b/scss/effects/_hover-shadow.scss
@@ -45,6 +45,7 @@
 	  height: 10px;
 	  width: 90%;
 	  opacity: 0;
+	  background: -webkit-radial-gradient(center, ellipse, rgba(0,0,0,.35) 0%, rgba(0, 0, 0, 0) 80%);
 	  background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 80%); /* W3C */
 		@include prefixed(transition-duration, $defaultDuration);
 		@include prefixed(transition-property, "transform, opacity");

diff --git a/scss/effects/_shadow-radial.scss b/scss/effects/_shadow-radial.scss
@@ -22,11 +22,13 @@
 
 	&:before {
 		bottom: 100%;
+		background: -webkit-radial-gradient(50% 150%, ellipse, $shadowColour 0%, rgba(0, 0, 0, 0) 80%);
     background: radial-gradient(ellipse at 50% 150%, $shadowColour 0%, rgba(0, 0, 0, 0) 80%);
 	}
 
 	&:after {
 		top: 100%;
+		background: -webkit-radial-gradient(50% -50%, ellipse, $shadowColour 0%, rgba(0, 0, 0, 0) 80%);
 		background: radial-gradient(ellipse at 50% -50%, $shadowColour 0%, rgba(0, 0, 0, 0) 80%);
 	}
 

diff --git a/scss/hover.scss b/scss/hover.scss
@@ -1,6 +1,6 @@
 /*!
  * Hover.css (http://ianlunn.co.uk/)
- * Version: 1.0.9
+ * Version: 1.0.10
  * Author: Ian Lunn @IanLunn
  * Author URL: http://ianlunn.co.uk/
  * Github: https://github.com/IanLunn/Hover