LeaVerou/prefixfree — Issue #28: -prefix-free breaks multiple gradients
Author: joesavage
Created: 2011-11-30 21:32:09+00:00
State: open

I recently tried to use -prefix-free on my site, but ended up dumping it as it changed code with multiple linear gradients (which I happened to get from the CSS3 Pattern Gallery) and incorrectly added vendor prefixes to each item in the gradient list instead of putting in different background-image properties. So something like this:

background-image:
-webkit-linear-gradient(#fff 2px, transparent 2px),
-webkit-linear-gradient(0, #fff 2px, transparent 2px),
-webkit-linear-gradient(rgba(255,255,255,0.3) 1px, transparent 1px),
-webkit-linear-gradient(0, rgba(255,255,255,0.3) 1px, transparent 1px);

SHOULD have turned into this (but didn't - it instead turned into one very long list of linear gradients [which breaks the effect in all the browsers I tried]):

background-image:
-webkit-linear-gradient(#fff 2px, transparent 2px),
-webkit-linear-gradient(0, #fff 2px, transparent 2px),
-webkit-linear-gradient(rgba(255,255,255,0.3) 1px, transparent 1px),
-webkit-linear-gradient(0, rgba(255,255,255,0.3) 1px, transparent 1px);
background-image:
-moz-linear-gradient(#fff 2px, transparent 2px),
-moz-linear-gradient(0, #fff 2px, transparent 2px),
-moz-linear-gradient(rgba(255,255,255,0.3) 1px, transparent 1px),
-moz-linear-gradient(0, rgba(255,255,255,0.3) 1px, transparent 1px);
background-image:
-ms-linear-gradient(#fff 2px, transparent 2px),
-ms-linear-gradient(0, #fff 2px, transparent 2px),
-ms-linear-gradient(rgba(255,255,255,0.3) 1px, transparent 1px),
-ms-linear-gradient(0, rgba(255,255,255,0.3) 1px, transparent 1px);
background-image:
-o-linear-gradient(#fff 2px, transparent 2px),
-o-linear-gradient(0, #fff 2px, transparent 2px),
-o-linear-gradient(rgba(255,255,255,0.3) 1px, transparent 1px),
-o-linear-gradient(0, rgba(255,255,255,0.3) 1px, transparent 1px);
background-image:
linear-gradient(#fff 2px, transparent 2px),
linear-gradient(0, #fff 2px, transparent 2px),
linear-gradient(rgba(255,255,255,0.3) 1px, transparent 1px),
linear-gradient(0, rgba(255,255,255,0.3) 1px, transparent 1px);