From 5649fd8ab9e14b5afac631e225fccdd6ee5290dc Mon Sep 17 00:00:00 2001
From: notsolucky <013715@gmail.com>
Date: Mon, 22 Dec 2014 20:23:23 +0100
Subject: [PATCH] Fixed for Firefox 34 and earlier

I edited the Honeycomb and Wave patterns so that they render with less transparency artifacts in Firefox 34 and earlier.
The hack consists of replacing all "transparent" color with an rgba color similar to the background with 0 opacity.
For the honeycomb pattern this adds +- 50 characters/bytes to the total size. The original still is the more elegant solution IMO.
---
 index.html | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index edf5b67..2af4b40 100755
--- a/index.html
+++ b/index.html
@@ -339,14 +339,15 @@ <h1>CSS3 Patterns Gallery</h1>
 background-image: linear-gradient(transparent 50%, rgba(255,255,255,.5) 50%);
 background-size: 50px 50px;" title="Horizontal stripes"></li>
 
+
 <li style="background:
-radial-gradient(circle closest-side,#FC4 40%,transparent 90%)20px 30px,
-radial-gradient(circle closest-side,#FC4 40%,transparent 90%)0 0,
-radial-gradient(circle farthest-side at 0% 50%,#fb1 22.8%,transparent 23.8%)21px 30px,
-radial-gradient(circle farthest-side at 0% 50%,#B71 24%,transparent 25%)19px 30px,
-linear-gradient(#fb1 15%,transparent 16%, transparent 84%,#fb1 85%)0 0,
-linear-gradient(150deg,#fb1 23.5%,#B71 24%,#B71 26%,transparent 26.5%,transparent 73.5%,#B71 74%,#B71 76%,#fb1 76.5%)0 0,
-linear-gradient(30deg,#fb1 23.5%,#B71 24%,#B71 26%,transparent 26.5%,transparent 73.5%,#B71 74%,#B71 76%,#fb1 76.5%)0 0,
+radial-gradient(circle closest-side,#FC4 40%,rgba(240,166,17,0) 90%)20px 30px,
+radial-gradient(circle closest-side,#FC4 40%,rgba(240,166,17,0) 90%)0 0,
+radial-gradient(circle farthest-side at 0% 50%,#fb1 22.8%,rgba(240,166,17,0) 23.8%)21px 30px,
+radial-gradient(circle farthest-side at 0% 50%,#B71 24%,rgba(240,166,17,0) 25%)19px 30px,
+linear-gradient(#fb1 15%,rgba(240,166,17,0) 16%, rgba(240,166,17,0) 84%,#fb1 85%)0 0,
+linear-gradient(150deg,#fb1 23.5%,#B71 24%,#B71 26%,rgba(240,166,17,0) 26.5%,rgba(240,166,17,0) 73.5%,#B71 74%,#B71 76%,#fb1 76.5%)0 0,
+linear-gradient(30deg,#fb1 23.5%,#B71 24%,#B71 26%,rgba(240,166,17,0) 26.5%,rgba(240,166,17,0) 73.5%,#B71 74%,#B71 76%,#fb1 76.5%)0 0,
 linear-gradient(90deg,#B71 2%,#fb1 2.5%,#fb1 97.5%,#B71 98%)0 0 #fb1;
 background-size:40px 60px;"
 title="HoneyComb" data-author="Paul Salentiny"></li>
@@ -354,9 +355,9 @@ <h1>CSS3 Patterns Gallery</h1>
 <li style="
 background-color:steelblue; 
 background-image: 
-linear-gradient(#ffffff 50%, transparent 50%),
-radial-gradient(circle closest-side, #FFFFFF 53%, transparent 54%),
-radial-gradient(circle closest-side, #FFFFFF 50%, transparent 51%);
+linear-gradient(#ffffff 50%, rgba(255,255,255,0) 50%),
+radial-gradient(circle closest-side, #FFFFFF 53%, rgba(255,255,255,0) 54%),
+radial-gradient(circle closest-side, #FFFFFF 50%, rgba(255,255,255,0) 51%);
 background-size:110px 200px;background-position: 0 0, 0 0, 55px 0;
 background-repeat:repeat-x;"
 title="Wave" data-author="Paul Salentiny"></li>