From 91d78c52f26817d5904a8a031fa0bac0d49c6316 Mon Sep 17 00:00:00 2001
From: raylu <raylu@mixpanel.com>
Date: Sun, 10 Jul 2011 13:50:27 -0700
Subject: make homepage scroll gradient work in webkit on non-OSX

use overlaid div with background instead of SVG mask
---
 views/pages/home.html.php | 15 +++------------
 webroot/css/home.css      | 31 ++++++++++++++++++++++++++-----
 2 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/views/pages/home.html.php b/views/pages/home.html.php
index c261efb..b682a27 100644
--- a/views/pages/home.html.php
+++ b/views/pages/home.html.php
@@ -4,19 +4,10 @@ $this->styles($this->html->style("/css/home.css"));
 
 <h1>The Otaku Social Network</h1>
 <a href="/users/signup" id="signup" class="gradient">Sign up!</a>
-<svg height="0">
-	<mask id="scrollmask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
-		<linearGradient id="g" gradientUnits="objectBoundingBox" x2="1" y2="0">
-			<stop stop-color="white" stop-opacity="0" offset="0"/>
-			<stop stop-color="white" stop-opacity="1" offset="0.03"/>
-			<stop stop-color="white" stop-opacity="1" offset="0.89"/>
-			<stop stop-color="white" stop-opacity="0" offset="1"/>
-		</linearGradient>
-		<rect x="0.0" y="0.0" width="1.0" height="1.0" fill="url(#g)"/>
-	</mask>
-</svg>
 <a class="prev browse left"></a>
-<div id="scrollwrapper" style="mask: url(#scrollmask)">
+<div id="scrollwrapper">
+	<div id="sg_left"></div>
+	<div id="sg_right"></div>
 	<div id="browsable" class="scrollable">
 		<div class="items">
 			<div>
diff --git a/webroot/css/home.css b/webroot/css/home.css
index f6fa51a..74f3b14 100644
--- a/webroot/css/home.css
+++ b/webroot/css/home.css
@@ -1,11 +1,32 @@
-#scrollwrapper {
+div#scrollwrapper {
 	padding: 15px 20px;
 	border: 1px solid #ccc;
+	border-width: 1px 0;
 	float: left;
 	margin: 10px 25px;
-	-moz-border-radius: 3px;
-	-webkit-border-radius: 3px;
-	border-radius: 3px;
+	position: relative; /* non-static for sg_left/right */
+}
+div#sg_left {
+	position: absolute;
+	top: -1px;
+	left: 0;
+	bottom: -1px;
+	width: 3%;
+	background: -moz-linear-gradient(left,  rgba(255,255,255,1), rgba(255,255,255,0));
+	background: -webkit-linear-gradient(left, rgba(255,255,255,1), rgba(255,255,255,0));
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffffff00', GradientType=1);
+	z-index: 1;
+}
+div#sg_right {
+	position: absolute;
+	top: -1px;
+	right: 0;
+	bottom: -1px;
+	width: 11%;
+	background: -moz-linear-gradient(right,  rgba(255,255,255,1), rgba(255,255,255,0));
+	background: -webkit-linear-gradient(right, rgba(255,255,255,1), rgba(255,255,255,0));
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff00', endColorstr='#ffffffff', GradientType=1);
+	z-index: 1;
 }
 .scrollable {
 	height: 330px;
@@ -46,7 +67,7 @@ a.browse {
 	display: block;
 	width: 30px;
 	height: 30px;
-	margin: 150px 10px;
+	margin: 200px 10px;
 	cursor: pointer;
 	font-size: 1px;
 	position: absolute;
-- 
cgit v1.2.3